feat:增加表单组件

lib/main.dart

@@ -3,8 +3,10 @@ import 'package:food_hub_app/profile.dart';
 import 'package:food_hub_app/record.dart';
 import 'package:food_hub_app/views/login.dart';
 import 'package:food_hub_app/views/recordForm.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
 
 void main() {
+  FormBuilderLocalizations.delegate.load(const Locale('zh', 'CN'));
   runApp(const MyApp());
 }
 
@@ -17,6 +19,7 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       theme: ThemeData(fontFamily: 'CustomFont', primaryColor: Colors.green),
+      locale: const Locale('zh', 'CN'),
       home: LoginPage(),
       routes: {
         '/home': (context) => MainPage(),

lib/profile.dart

@@ -1,15 +1,126 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
+import 'package:intl/intl.dart';
 
-class ProfilePage extends StatefulWidget{
+class ProfilePage extends StatefulWidget {
   const ProfilePage({super.key});
 
   @override
   State<ProfilePage> createState() => _ProfilePage();
 }
 
-class _ProfilePage extends State<ProfilePage>{
+// class _ProfilePage extends State<ProfilePage>{
+//   @override
+//   Widget build(BuildContext context) {
+//     return const Center(child: Text("个人主页"));
+//   }
+// }
+
+class _ProfilePage extends State<ProfilePage> {
+  final _formKey = GlobalKey<FormBuilderState>();
+  bool autoValidate = true;
+  bool readOnly = false;
+  bool showSegmentedControl = true;
+  final _genderOptions = ['Male', 'Female', 'Other'];
+
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text("个人主页"));
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: SingleChildScrollView(
+        child: Column(
+          children: <Widget>[
+            FormBuilder(
+              key: _formKey,
+              // enabled: false,
+              autovalidateMode: AutovalidateMode.onUserInteraction,
+              initialValue: {'date': DateTime.now(), 'accept_terms': false},
+              skipDisabled: true,
+              child: Column(
+                children: <Widget>[
+                  const SizedBox(height: 15),
+                  FormBuilderTextField(
+                    name: 'name',
+                    decoration: InputDecoration(
+                      labelText: '姓名',
+                      hintText: '请输入姓名',
+                      filled: true,
+                      fillColor: Colors.white,
+                      floatingLabelBehavior: FloatingLabelBehavior.always,
+                      // 始终显示标签
+                      border: OutlineInputBorder(),
+                    ),
+                    // onChanged: (val) => print(val),
+                    validator: FormBuilderValidators.compose([
+                      FormBuilderValidators.required(),
+                      FormBuilderValidators.minLength(3),
+                      FormBuilderValidators.maxLength(70),
+                    ]),
+                    keyboardType: TextInputType.name,
+                  ),
+                  const SizedBox(height: 15),
+                  FormBuilderDateTimePicker(
+                    name: 'date',
+                    decoration: InputDecoration(
+                      labelText: '时间',
+                      hintText: '请选择时间',
+                      filled: true,
+                      fillColor: Colors.white,
+                      border: OutlineInputBorder(),
+                    ),
+                    inputType: InputType.both,
+                    initialDate: DateTime.now(),
+                    firstDate: DateTime(1900),
+                    lastDate: DateTime(2100),
+                    format: DateFormat('yyyy-MM-dd HH:mm:ss'),
+                    // enabled: _formKey.currentState?.fields['date']?.enabled ?? true,
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 20),
+            Row(
+              children: <Widget>[
+                Expanded(
+                  child: ElevatedButton(
+                    onPressed: () {
+                      if (_formKey.currentState?.saveAndValidate() ?? false) {
+                        print(_formKey.currentState?.value);
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          const SnackBar(content: Text('Processing Data')),
+                        );
+                      } else {
+                        print(_formKey.currentState?.value);
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          const SnackBar(content: Text('Validation failed')),
+                        );
+                      }
+                    },
+                    child: const Text(
+                      'Submit',
+                      style: TextStyle(color: Colors.green),
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 20),
+                Expanded(
+                  child: OutlinedButton(
+                    onPressed: () {
+                      _formKey.currentState?.reset();
+                    },
+                    // color: Colors.red,
+                    child: const Text(
+                      'Reset',
+                      style: TextStyle(color: Colors.red),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
   }
-}
+}

lib/views/login.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
 
 class LoginPage extends StatefulWidget {
   const LoginPage({super.key});
@@ -21,7 +23,7 @@ class _LoginPage extends State<LoginPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: Colors.grey[100],
       body: Form(
         key: _formKey,
         autovalidateMode: AutovalidateMode.onUserInteraction,
@@ -84,40 +86,36 @@ class _LoginPage extends State<LoginPage> {
   }
 
   Widget buildUsernameTextField() {
-    return TextFormField(
+    return FormBuilderTextField(
+      name: 'username',
       decoration: InputDecoration(
         labelText: '账号',
         prefixIcon: Icon(Icons.person),
         hintText: "请输入账号",
         border: OutlineInputBorder(),
+        floatingLabelBehavior: FloatingLabelBehavior.always,
         filled: true,
-        fillColor: Colors.grey[100],
+        fillColor: Colors.white,
       ),
-      validator: (v) {
-        if (v!.isEmpty) {
-          return '请输入账号';
-        }
-      },
+      validator: FormBuilderValidators.required(),
       onSaved: (v) => _username = v!,
     );
   }
 
   Widget buildPasswordTextField(BuildContext context) {
-    return TextFormField(
+    return FormBuilderTextField(
+      name: 'password',
       obscureText: _isObscure, // 是否显示文字
       onSaved: (v) => _password = v!,
-      validator: (v) {
-        if (v!.isEmpty) {
-          return '请输入密码';
-        }
-      },
+      validator: FormBuilderValidators.required(),
       decoration: InputDecoration(
         labelText: "密码",
         prefixIcon: Icon(Icons.lock),
         hintText: "请输入密码",
         border: OutlineInputBorder(),
         filled: true,
-        fillColor: Colors.grey[100],
+        fillColor: Colors.white,
+        floatingLabelBehavior: FloatingLabelBehavior.always,
         suffixIcon: IconButton(
           icon: Icon(Icons.remove_red_eye, color: _eyeColor),
           onPressed: () {