组件 #

一个全面的Flutter表单构建小部件库，旨在简化和加快Flutter应用程序中表单的开发。

特性 #

• 易于使用的表单构建小部件
• 可自定义的表单字段
• 内置验证
• 支持各种输入类型
• 与现有的Flutter表单库集成

开始使用 #

要开始使用components包，请将其添加到您的pubspec.yaml文件中：

dependencies:
  components: ^0.0.1

完整示例Demo

以下是一个完整的示例，展示了如何使用flutter_form_builder_components来创建一个简单的登录表单。

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Form Builder Components Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: LoginForm(),
        ),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return FormBuilder(
      key: _fbKey,
      child: Column(
        children: [
          FormBuilderTextField(
            name: 'email',
            decoration: InputDecoration(labelText: 'Email'),
            validator: FormBuilderValidators.compose([
              FormBuilderValidators.email(context),
              FormBuilderValidators.required(context),
            ]),
          ),
          SizedBox(height: 20),
          FormBuilderTextField(
            name: 'password',
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: FormBuilderValidators.compose([
              FormBuilderValidators.required(context),
            ]),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_fbKey.currentState.saveAndValidate()) {
                print(_fbKey.currentState.value);
              } else {
                print('Validation failed');
              }
            },
            child: Text('Login'),
          )
        ],
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:flutter_form_builder/flutter_form_builder.dart';
   

2. 定义主应用类：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Flutter Form Builder Components Demo'),
           ),
           body: Padding(
             padding: const EdgeInsets.all(16.0),
             child: LoginForm(),
           ),
         ),
       );
     }
   }
   

3. 定义登录表单类：

   class LoginForm extends StatefulWidget {
     @override
     _LoginFormState createState() => _LoginFormState();
   }
   

4. 定义登录表单状态类：

   class _LoginFormState extends State<LoginForm> {
     final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
   
     @override
     Widget build(BuildContext context) {
       return FormBuilder(
         key: _fbKey,
         child: Column(
           children: [
             // 邮箱输入框
             FormBuilderTextField(
               name: 'email',
               decoration: InputDecoration(labelText: 'Email'),
               validator: FormBuilderValidators.compose([
                 FormBuilderValidators.email(context),
                 FormBuilderValidators.required(context),
               ]),
             ),
             SizedBox(height: 20),
             // 密码输入框
             FormBuilderTextField(
               name: 'password',
               decoration: InputDecoration(labelText: 'Password'),
               obscureText: true,
               validator: FormBuilderValidators.compose([
                 FormBuilderValidators.required(context),
               ]),
             ),
             SizedBox(height: 20),
             // 登录按钮
             ElevatedButton(
               onPressed: () {
                 if (_fbKey.currentState.saveAndValidate()) {
                   print(_fbKey.currentState.value);
                 } else {
                   print('Validation failed');
                 }
               },
               child: Text('Login'),
             )
           ],
         ),
       );
     }
   }
   

通过以上步骤，您可以轻松地在Flutter应用中使用flutter_form_builder_components来创建和管理表单。