feat:增加表单组件

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),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
   }
-}
+}