feat:拆分组件

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:food_hub_app/profile.dart';
 import 'package:food_hub_app/record.dart';
 import 'package:food_hub_app/views/login.dart';
@@ -19,7 +20,25 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       theme: ThemeData(fontFamily: 'CustomFont', primaryColor: Colors.green),
-      locale: const Locale('zh', 'CN'),
+      supportedLocales: const [
+        Locale('en', 'US'), // 英语
+        Locale('zh', 'CN'), // 中文
+      ],
+      // 本地化代理配置
+      localizationsDelegates: const [
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate,
+      ],
+      // 根据系统语言自动选择Locale
+      localeResolutionCallback: (locale, supportedLocales) {
+        for (var supportedLocale in supportedLocales) {
+          if (supportedLocale.languageCode == locale?.languageCode) {
+            return supportedLocale;
+          }
+        }
+        return supportedLocales.first;
+      },
       home: LoginPage(),
       routes: {
         '/home': (context) => MainPage(),

lib/profile.dart

@@ -1,7 +1,4 @@
 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 {
   const ProfilePage({super.key});
@@ -10,117 +7,9 @@ class ProfilePage extends StatefulWidget {
   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 Padding(
+    return const Center(child: Text("个人主页"));
-      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,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(
+    return Column(
-      name: 'username',
+      crossAxisAlignment: CrossAxisAlignment.start,
-      decoration: InputDecoration(
+      children: [
-        labelText: '账号',
+        formLabelText(labelText: "账号："),
-        prefixIcon: Icon(Icons.person),
+        const SizedBox(height: 5),
-        hintText: "请输入账号",
+        FormBuilderTextField(
-        border: OutlineInputBorder(),
+          name: 'username',
-        floatingLabelBehavior: FloatingLabelBehavior.always,
+          decoration: formInputDecoration(hintText: "请输入账号", prefixIcon: Icons.person),
-        filled: true,
+          validator: FormBuilderValidators.required(),
-        fillColor: Colors.white,
+          onSaved: (v) => _username = v!,
-      ),
+        ),
-      validator: FormBuilderValidators.required(),
+      ],
-      onSaved: (v) => _username = v!,
     );
   }
 
   Widget buildPasswordTextField(BuildContext context) {
-    return FormBuilderTextField(
+    return Column(
-      name: 'password',
+      crossAxisAlignment: CrossAxisAlignment.start,
-      obscureText: _isObscure, // 是否显示文字
+      children: [
-      onSaved: (v) => _password = v!,
+        formLabelText(labelText: "密码："),
-      validator: FormBuilderValidators.required(),
+        const SizedBox(height: 5),
-      decoration: InputDecoration(
+        FormBuilderTextField(
-        labelText: "密码",
+          name: 'password',
-        prefixIcon: Icon(Icons.lock),
+          obscureText: _isObscure,
-        hintText: "请输入密码",
+          // 是否显示文字
-        border: OutlineInputBorder(),
+          onSaved: (v) => _password = v!,
-        filled: true,
+          validator: FormBuilderValidators.required(),
-        fillColor: Colors.white,
+          decoration: InputDecoration(
-        floatingLabelBehavior: FloatingLabelBehavior.always,
+            prefixIcon: Icon(Icons.lock),
-        suffixIcon: IconButton(
+            hintText: "请输入密码",
-          icon: Icon(Icons.remove_red_eye, color: _eyeColor),
+            hintStyle: TextStyle(color: Colors.grey),
-          onPressed: () {
+            border: OutlineInputBorder(),
-            // 修改 state 内部变量, 且需要界面内容更新, 需要使用 setState()
+            filled: true,
-            setState(() {
+            fillColor: Colors.white,
-              _isObscure = !_isObscure;
+            suffixIcon: IconButton(
-              _eyeColor =
+              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: () {
+          onPressed: () => loginClick(context),
-            // 表单校验通过才会继续执行
-            if ((_formKey.currentState as FormState).validate()) {
-              (_formKey.currentState as FormState).save();
-              Navigator.pushNamed(context, '/home');
-            }
-          },
         ),
       ),
     );

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(
+      body: Padding(
-        child: Column(
+        padding: const EdgeInsets.all(16.0),
-          mainAxisAlignment: MainAxisAlignment.center,
+        child: SingleChildScrollView(
-          children: [
+          child: Column(
-            Text('这是新页面'),
+            children: <Widget>[
-            ElevatedButton(
+              FormBuilder(
-              onPressed: () => Navigator.pop(context),
+                key: _formKey,
-              child: Text('返回'),
+                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: '取消'),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );

lib/widgets/common/index.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+
+Widget formLabelText({required String labelText}) {
+  return Text.rich(
+    TextSpan(
+      children: [
+        TextSpan(text: '* ', style: TextStyle(color: Colors.red)),
+        TextSpan(text: labelText),
+      ],
+    ),
+  );
+}
+
+InputDecoration formInputDecoration({
+  required String hintText, // 使用命名参数并标记为必填
+  IconData? prefixIcon,
+}) {
+  return InputDecoration(
+    hintText: hintText,
+    hintStyle: TextStyle(color: Colors.grey),
+    filled: true,
+    fillColor: Colors.white,
+    border: OutlineInputBorder(),
+    prefixIcon: prefixIcon != null ? Icon(prefixIcon) : null,
+  );
+}
+
+ButtonStyle primaryButtonStyle() {
+  return ButtonStyle(
+    backgroundColor: WidgetStateProperty.all(Colors.green),
+    shape: WidgetStateProperty.all(
+      RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+    ),
+  );
+}
+
+ButtonStyle cancelButtonStyle() {
+  return ButtonStyle(
+    backgroundColor: WidgetStateProperty.all(Colors.grey),
+    shape: WidgetStateProperty.all(
+      RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+    ),
+  );
+}
+
+Text buttonText({required String text}) {
+  return Text(text, style: TextStyle(color: Colors.white));
+}
+
+void showSuccessToast(String message) {
+  Fluttertoast.showToast(
+    msg: message,
+    toastLength: Toast.LENGTH_SHORT,
+    gravity: ToastGravity.CENTER,
+    timeInSecForIosWeb: 1,
+    backgroundColor: Colors.green,
+    textColor: Colors.white,
+    fontSize: 16.0,
+  );
+}
+
+void showErrorToast(String message) {
+  Fluttertoast.showToast(
+    msg: message,
+    toastLength: Toast.LENGTH_SHORT,
+    gravity: ToastGravity.CENTER,
+    timeInSecForIosWeb: 1,
+    backgroundColor: Colors.red,
+    textColor: Colors.white,
+    fontSize: 16.0,
+  );
+}

pubspec.lock

@@ -103,7 +103,7 @@ packages:
     source: hosted
     version: "5.0.0"
   flutter_localizations:
-    dependency: transitive
+    dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
@@ -112,6 +112,19 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  fluttertoast:
+    dependency: "direct main"
+    description:
+      name: fluttertoast
+      sha256: "25e51620424d92d3db3832464774a6143b5053f15e382d8ffbfd40b6e795dcf1"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "8.2.12"
   form_builder_validators:
     dependency: "direct main"
     description:
@@ -285,6 +298,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "14.3.1"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.1.1"
 sdks:
   dart: ">=3.7.0 <4.0.0"
   flutter: ">=3.29.0"

pubspec.yaml

@@ -30,7 +30,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-
+  flutter_localizations:
+    sdk: flutter
   # The following adds the Cupertino Icons fonts to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.8
@@ -41,6 +42,7 @@ dependencies:
   flutter_date_pickers: ^0.4.3
   flutter_form_builder: ^10.0.0
   form_builder_validators: ^11.1.2
+  fluttertoast: ^8.2.2
   intl: ^0.19.0
 
 dev_dependencies: