feat:拆分组件

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: '取消'),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );