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),
         ),
       ),
     );

lib/views/recordForm.dart

@@ -1,23 +1,117 @@
 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';
+import 'package:intl/intl.dart';
 
-class RecordFormPage extends StatelessWidget {
+class RecordFormPage extends StatefulWidget {
   const RecordFormPage({super.key});
 
+  // @override
+  // Widget build(BuildContext context) {
+  //   return Scaffold(
+  //     appBar: AppBar(title: Text('新页面'), backgroundColor: Colors.white),
+  //     backgroundColor: Color(0xFFF5F5F5),
+  //     body: Center(
+  //       child: Column(
+  //         mainAxisAlignment: MainAxisAlignment.center,
+  //         children: [
+  //           Text('这是新页面'),
+  //           ElevatedButton(
+  //             onPressed: () => Navigator.pop(context),
+  //             child: Text('返回'),
+  //           ),
+  //         ],
+  //       ),
+  //     ),
+  //   );
+  // }
+
+  @override
+  State<RecordFormPage> createState() => _RecordFormPage();
+}
+
+class _RecordFormPage extends State<RecordFormPage> {
+  final _formKey = GlobalKey<FormBuilderState>();
+
+  void confirmClick(BuildContext context) {
+    if (_formKey.currentState?.saveAndValidate() ?? false) {
+      showSuccessToast("新增记录成功");
+    } else {
+      showErrorToast("请先提交信息");
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('新页面'), backgroundColor: Colors.white),
+      appBar: AppBar(title: Text('新增记录'), backgroundColor: Colors.white),
       backgroundColor: Color(0xFFF5F5F5),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Text('这是新页面'),
-            ElevatedButton(
-              onPressed: () => Navigator.pop(context),
-              child: Text('返回'),
-            ),
-          ],
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: SingleChildScrollView(
+          child: Column(
+            children: <Widget>[
+              FormBuilder(
+                key: _formKey,
+                initialValue: {'date': DateTime.now(), 'accept_terms': false},
+                skipDisabled: true,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    formLabelText(labelText: '菜谱名称'),
+                    const SizedBox(height: 5),
+                    FormBuilderTextField(
+                      name: 'name',
+                      decoration: formInputDecoration(hintText: '请输入或选择菜谱名称'),
+                      // onChanged: (val) => print(val),
+                      validator: FormBuilderValidators.compose([
+                        FormBuilderValidators.required(),
+                        FormBuilderValidators.minLength(3),
+                        FormBuilderValidators.maxLength(70),
+                      ]),
+                      keyboardType: TextInputType.name,
+                    ),
+                    const SizedBox(height: 10),
+                    formLabelText(labelText: '完成时间'),
+                    const SizedBox(height: 5),
+                    FormBuilderDateTimePicker(
+                      name: 'date',
+                      decoration: formInputDecoration(
+                        hintText: '请选择日期',
+                        prefixIcon: Icons.date_range,
+                      ),
+                      inputType: InputType.date,
+                      firstDate: DateTime(1900),
+                      lastDate: DateTime(2100),
+                      format: DateFormat('yyyy-MM-dd'),
+                      // enabled: _formKey.currentState?.fields['date']?.enabled ?? true,
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 20),
+              Row(
+                children: <Widget>[
+                  Expanded(
+                    child: ElevatedButton(
+                      style: primaryButtonStyle(),
+                      onPressed: () => confirmClick(context),
+                      child: buttonText(text: '确认'),
+                    ),
+                  ),
+                  const SizedBox(width: 20),
+                  Expanded(
+                    child: ElevatedButton(
+                      style: cancelButtonStyle(),
+                      onPressed: () => Navigator.pop(context),
+                      child: buttonText(text: '取消'),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );