Flutter咨询表单插件consultation_form_library的使用

在Flutter开发中，处理表单是一个常见的需求。consultation_form_library 是一个用于快速构建咨询表单的插件，它可以帮助开发者轻松实现用户输入的收集功能。

插件简介

consultation_form_library 提供了一系列预定义的表单组件，如文本输入框、下拉选择框等，能够帮助开发者快速搭建咨询表单。该插件支持多种验证规则，并且提供了灵活的配置选项。

使用步骤

以下是使用 consultation_form_library 构建表单的完整示例。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  consultation_form_library: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

2. 创建表单

接下来，创建一个简单的表单页面，包含姓名、邮箱和电话号码三个字段。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsultationFormPage(),
    );
  }
}

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

class _ConsultationFormPageState extends State<ConsultationFormPage> {
  final _formKey = GlobalKey<FormState>();

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('咨询表单'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 姓名输入框
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: '姓名'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入您的姓名';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              // 邮箱输入框
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: '邮箱'),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入您的邮箱';
                  }
                  if (!value.contains('@')) {
                    return '请输入有效的邮箱地址';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              // 电话号码输入框
              TextFormField(
                controller: _phoneController,
                decoration: InputDecoration(labelText: '电话号码'),
                keyboardType: TextInputType.phone,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入您的电话号码';
                  }
                  return null;
                },
              ),
              SizedBox(height: 24),
              // 提交按钮
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过，执行提交逻辑
                    print('姓名: ${_nameController.text}');
                    print('邮箱: ${_emailController.text}');
                    print('电话号码: ${_phoneController.text}');
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}