feat:拆分组件

lib/views/login.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 import 'package:form_builder_validators/form_builder_validators.dart';
 
 class LoginPage extends StatefulWidget {
@@ -20,6 +21,16 @@ class _LoginPage extends State<LoginPage> {
     {"title": "wechat", "icon": Icons.wechat},
   ];
 
+  void loginClick(BuildContext context) {
+    // 表单校验通过才会继续执行
+    if ((_formKey.currentState as FormState).validate()) {
+      (_formKey.currentState as FormState).save();
+      Navigator.pushNamed(context, '/home');
+    } else {
+      showErrorToast("请先输入信息");
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -86,50 +97,56 @@ class _LoginPage extends State<LoginPage> {
   }
 
   Widget buildUsernameTextField() {
-    return FormBuilderTextField(
-      name: 'username',
-      decoration: InputDecoration(
-        labelText: '账号',
-        prefixIcon: Icon(Icons.person),
-        hintText: "请输入账号",
-        border: OutlineInputBorder(),
-        floatingLabelBehavior: FloatingLabelBehavior.always,
-        filled: true,
-        fillColor: Colors.white,
-      ),
-      validator: FormBuilderValidators.required(),
-      onSaved: (v) => _username = v!,
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        formLabelText(labelText: "账号："),
+        const SizedBox(height: 5),
+        FormBuilderTextField(
+          name: 'username',
+          decoration: formInputDecoration(hintText: "请输入账号", prefixIcon: Icons.person),
+          validator: FormBuilderValidators.required(),
+          onSaved: (v) => _username = v!,
+        ),
+      ],
     );
   }
 
   Widget buildPasswordTextField(BuildContext context) {
-    return FormBuilderTextField(
-      name: 'password',
-      obscureText: _isObscure, // 是否显示文字
-      onSaved: (v) => _password = v!,
-      validator: FormBuilderValidators.required(),
-      decoration: InputDecoration(
-        labelText: "密码",
-        prefixIcon: Icon(Icons.lock),
-        hintText: "请输入密码",
-        border: OutlineInputBorder(),
-        filled: true,
-        fillColor: Colors.white,
-        floatingLabelBehavior: FloatingLabelBehavior.always,
-        suffixIcon: IconButton(
-          icon: Icon(Icons.remove_red_eye, color: _eyeColor),
-          onPressed: () {
-            // 修改 state 内部变量, 且需要界面内容更新, 需要使用 setState()
-            setState(() {
-              _isObscure = !_isObscure;
-              _eyeColor =
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        formLabelText(labelText: "密码："),
+        const SizedBox(height: 5),
+        FormBuilderTextField(
+          name: 'password',
+          obscureText: _isObscure,
+          // 是否显示文字
+          onSaved: (v) => _password = v!,
+          validator: FormBuilderValidators.required(),
+          decoration: InputDecoration(
+            prefixIcon: Icon(Icons.lock),
+            hintText: "请输入密码",
+            hintStyle: TextStyle(color: Colors.grey),
+            border: OutlineInputBorder(),
+            filled: true,
+            fillColor: Colors.white,
+            suffixIcon: IconButton(
+              icon: Icon(Icons.remove_red_eye, color: _eyeColor),
+              onPressed: () {
+                // 修改 state 内部变量, 且需要界面内容更新, 需要使用 setState()
+                setState(() {
+                  _isObscure = !_isObscure;
+                  _eyeColor =
                   (_isObscure
                       ? Colors.grey
                       : Theme.of(context).iconTheme.color)!;
-            });
-          },
-        ),
-      ),
+                });
+              },
+            ),
+          ),
+        )
+      ],
     );
   }
 
@@ -178,13 +195,7 @@ class _LoginPage extends State<LoginPage> {
             '登录',
             style: TextStyle(fontSize: 24, color: Colors.white),
           ),
-          onPressed: () {
-            // 表单校验通过才会继续执行
-            if ((_formKey.currentState as FormState).validate()) {
-              (_formKey.currentState as FormState).save();
-              Navigator.pushNamed(context, '/home');
-            }
-          },
+          onPressed: () => loginClick(context),
         ),
       ),
     );