Flutter 中的表单验证（17）

介绍

在本文中，我们将学习如何在 Flutter 中应用表单验证。对于表单验证，我们将使用 flutter_form_builder ，它为我们提供了创建表单组件的语法，并减少了构建表单、验证字段、对更改做出反应以及以地图的形式收集表单值的样板需求。那么，让我们开始在 Flutter 中实现表单验证。

输出

编程步骤

第1步

第一步也是最基本的步骤是在 Flutter 中创建一个新应用程序。如果你是 Flutter 的初学者，那么你可以查看我的博客Create a first app in Flutter。我创建了一个名为“flutter_form_validation”的应用程序。

第2步

我们需要添加一个表单构建器插件，它为我们提供表单验证。为此，打开项目中的 pubspec.yaml 文件并将以下依赖项添加到其中。

dependencies:  
 flutter:  
   sdk: flutter  
 cupertino_icons: ^0.1.2  
 flutter_form_builder: ^3.4.1  

第 3 步

现在，转到 main.dart 并导入表单构建器包。

import 'package:flutter_form_builder/flutter_form_builder.dart';  

第4步

现在，我们将实现所有类型的表单验证控制器，以了解如何将验证应用于表单控制器。以下是以编程方式实现的。

import 'package:flutter/material.dart';    
import 'package:flutter_form_builder/flutter_form_builder.dart';    
import 'package:intl/intl.dart';    
     
void main() => runApp(MyApp());    
     
class MyApp extends StatelessWidget {    
 @override    
 Widget build(BuildContext context) {    
   return MaterialApp(    
     theme: ThemeData(    
       primarySwatch: Colors.purple,    
     ),    
     home: MyHomePage(),    
   );    
 }    
}    
     
class MyHomePage extends StatefulWidget {    
 @override    
 _MyHomePageState createState() => _MyHomePageState();    
}    
     
class _MyHomePageState extends State<MyHomePage> {    
 var data;    
 bool autoValidate = true;    
 bool readOnly = false;    
 bool showSegmentedControl = true;    
 final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();    
     
 @override    
 Widget build(BuildContext context) {    
   return Scaffold(    
     appBar: AppBar(    
       title: Text("Flutter Form Validation"),    
     ),    
     body: Padding(    
       padding: EdgeInsets.all(10),    
       child: SingleChildScrollView(    
         child: Column(    
           children: <Widget>[    
             FormBuilder(    
               key: _fbKey,    
               initialValue: {    
                 'date': DateTime.now(),    
                 'accept_terms': false,    
               },    
               autovalidate: true,    
               child: Column(    
                 children: <Widget>[    
                   FormBuilderTextField(    
                     attribute: 'text',    
                     validators: [FormBuilderValidators.required()],    
                     decoration: InputDecoration(labelText: "Full Name"),    
                   ),    
                   FormBuilderDateTimePicker(    
                     attribute: "date",    
                     inputType: InputType.date,    
                     validators: [FormBuilderValidators.required()],    
                     format: DateFormat("dd-MM-yyyy"),    
                     decoration: InputDecoration(labelText: "Date of Birth"),    
                   ),    
                   FormBuilderDropdown(    
                     attribute: "gender",    
                     decoration: InputDecoration(labelText: "Gender"),    
                     // initialValue: 'Male',    
                     hint: Text('Select Gender'),    
                     validators: [FormBuilderValidators.required()],    
                     items: ['Male', 'Female', 'Other']    
                         .map((gender) => DropdownMenuItem(    
                             value: gender, child: Text("$gender")))    
                         .toList(),    
                   ),    
                   FormBuilderTextField(    
                     attribute: "age",    
                     decoration: InputDecoration(labelText: "Age"),    
                     keyboardType: TextInputType.number,    
                     validators: [    
                       FormBuilderValidators.numeric(),    
                       FormBuilderValidators.max(70),    
                     ],    
                   ),    
                   FormBuilderSlider(    
                     attribute: "slider",    
                     validators: [FormBuilderValidators.min(6)],    
                     min: 0.0,    
                     max: 10.0,    
                     initialValue: 1.0,    
                     divisions: 20,    
                     decoration: InputDecoration(    
                         labelText: "Number of Family Members"),    
                   ),    
                   FormBuilderSegmentedControl(    
                     decoration: InputDecoration(labelText: "Rating"),    
                     attribute: "movie_rating",    
                     options: List.generate(5, (i) => i + 1)    
                         .map(    
                             (number) => FormBuilderFieldOption(value: number))    
                         .toList(),    
                   ),    
                   FormBuilderStepper(    
                     decoration: InputDecoration(labelText: "Stepper"),    
                     attribute: "stepper",    
                     initialValue: 10,    
                     step: 1,    
                   ),    
                   FormBuilderCheckboxList(    
                     decoration:    
                         InputDecoration(labelText: "Languages you know"),    
                     attribute: "languages",    
                     initialValue: ["English"],    
                     options: [    
                       FormBuilderFieldOption(value: "English"),    
                       FormBuilderFieldOption(value: "Hindi"),    
                       FormBuilderFieldOption(value: "Other")    
                     ],    
                   ),    
                   FormBuilderSignaturePad(    
                     decoration: InputDecoration(labelText: "Signature"),    
                     attribute: "signature",    
                     height: 100,    
                   ),    
                   FormBuilderRate(    
                     decoration: InputDecoration(labelText: "Rate this site"),    
                     attribute: "rate",    
                     iconSize: 32.0,    
                     initialValue: 1,    
                     max: 5,    
                   ),    
                   FormBuilderCheckbox(    
                     attribute: 'accept_terms',    
                     label: Text(    
                         "I have read and agree to the terms and conditions"),    
                     validators: [    
                       FormBuilderValidators.requiredTrue(    
                         errorText:    
                             "You must accept terms and conditions to continue",    
                       ),    
                     ],    
                   ),    
                 ],    
               ),    
             ),    
             Row(    
               children: <Widget>[    
                 MaterialButton(    
                   child: Text("Submit"),    
                   onPressed: () {    
                     _fbKey.currentState.save();    
                     if (_fbKey.currentState.validate()) {    
                       print(_fbKey.currentState.value);    
                     }    
                   },    
                 ),    
                 MaterialButton(    
                   child: Text("Reset"),    
                   onPressed: () {    
                     _fbKey.currentState.reset();    
                   },    
                 ),    
               ],    
             )    
           ],    
         ),    
       ),    
     ),    
   );    
 }    
} 

第 5 步

太好了，你已经完成了 Flutter 中的表单验证。在设备或模拟器中运行此项目并检查输出。

结论

在本文中，我们学习了如何在 Flutter 中实现表单验证。您可以在插件的官方文档中查看更多验证。