Flutter表单字段组件插件form_field_widgets的使用

Flutter表单字段组件插件form_field_widgets的使用

示例代码

//
// Copyright 2023 Andrious Solutions Ltd. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
//

import 'package:example/src/view.dart';

void main() => runApp(FormFieldsExampleApp());

在这个示例中，FormFieldsExampleApp 是应用的入口点。该应用使用了 form_field_widgets 插件来创建表单字段。

使用 form_field_widgets 创建表单字段

form_field_widgets 是一个用于简化 Flutter 表单字段创建的插件。通过它，我们可以轻松地创建并管理各种表单字段。

安装插件

首先，确保在 pubspec.yaml 文件中添加 form_field_widgets 依赖：

dependencies:
  flutter:
    sdk: flutter
  form_field_widgets: ^1.0.0

然后运行 flutter pub get 来获取依赖。

基本用法

下面是一个简单的例子，展示了如何使用 form_field_widgets 创建一个包含多个表单字段的表单。

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

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  // 表单字段控制器
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 文本输入框
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              // 邮箱输入框
              EmailFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || !RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value)) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
              ),
              // 提交按钮
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 提交表单
                    print('Name: ${_nameController.text}');
                    print('Email: ${_emailController.text}');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }
}

详细说明

1. 导入插件：

   import 'package:form_field_widgets/form_field_widgets.dart';
   

2. 创建表单键：

   final _formKey = GlobalKey<FormState>();
   

3. 创建控制器：

   final TextEditingController _nameController = TextEditingController();
   final TextEditingController _emailController = TextEditingController();
   

4. 构建表单：

   return Scaffold(
     appBar: AppBar(
       title: Text('Form Example'),
     ),
     body: Padding(
       padding: const EdgeInsets.all(16.0),
       child: Form(
         key: _formKey,
         child: Column(
           children: [
             // 文本输入框
             TextFormField(
               controller: _nameController,
               decoration: InputDecoration(labelText: 'Name'),
               validator: (value) {
                 if (value == null || value.isEmpty) {
                   return 'Please enter your name';
                 }
                 return null;
               },
             ),
             // 邮箱输入框
             EmailFormField(
               controller: _emailController,
               decoration: InputDecoration(labelText: 'Email'),
               validator: (value) {
                 if (value == null || !RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value)) {
                   return 'Please enter a valid email';
                 }
                 return null;
               },
             ),
             // 提交按钮
             SizedBox(height: 20),
             ElevatedButton(
               onPressed: () {
                 if (_formKey.currentState!.validate()) {
                   // 提交表单
                   print('Name: ${_nameController.text}');
                   print('Email: ${_emailController.text}');
                 }
               },
               child: Text('Submit'),
             ),
           ],
         ),
       ),
     ),
   );
   

5. 处理表单提交：

   onPressed: () {
     if (_formKey.currentState!.validate()) {
       // 提交表单
       print('Name: ${_nameController.text}');
       print('Email: ${_emailController.text}');
     }
   }
   

6. 释放控制器：

   [@override](/user/override)
   void dispose() {
     _nameController.dispose();
     _emailController.dispose();
     super.dispose();
   }