Flutter表单页面管理插件form_page_view的使用

Form Page View 是一个Flutter包，它允许你创建一个具有分页视图和进度条的表单。此包使得创建交互式且可自定义的表单变得简单，并且可以实现页面之间的无缝导航。

示例

圆形指示器

线性指示器

动画演示

圆形指示器

线性指示器

支持的平台

特性

• 创建具有分页视图和进度条的表单。
• 使用进度条或返回按钮在页面之间导航。
• 自定义表单的外观。
• 自定义进度指示器。
• 自定义按钮小部件。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  form_page_view: ^1.0.0

在Dart文件中导入该包：

import 'package:form_page_view/form_page_view.dart';

使用方法

首先，创建一个表单页面模型（FormPageModel）列表以定义表单中的页面。每个页面模型应包含一个用于表单验证的 formKey 和表示页面内容的 body。

final List<FormPageModel> pages = [
  FormPageModel(
    formKey: GlobalKey<FormState>(),
    body: YourFormWidget(),
    title: 'Page 1',
    textButton: 'Next',
  ),
  // 添加其他页面模型
];

接下来，创建一个 PageController 以控制页面之间的导航：

final PageController _pageController = PageController();

使用 FormPageView 小部件，通过提供页面列表、表单提交时执行的函数以及其他可选参数来自定义表单的外观和行为：

FormPageView(
  progress: ProgressIndicatorType.linear,
  pages: pages,
  onFormSubmitted: () {
    // 表单提交时执行的函数
  },
  controller: _pageController,
),

有关更多详细信息，请参阅示例文件夹中的示例。

属性

自定义

表单小部件

你可以通过提供以下参数来自定义表单小部件：

• contentPadding: 表单页面内容的内边距，默认为 EdgeInsets.all(16)。
• buttonPadding: 页面导航按钮的内边距，默认为 EdgeInsets.all(16)。
• progressPadding: 进度指示器的内边距，默认为 EdgeInsets.all(8.0)。
• style: 用于自定义表单外观和行为的 FormPageStyle 对象。

表单页面样式

你可以通过提供 FormPageStyle 对象来自定义表单页面样式。可用的参数包括：

• backgroundColor: 表单页面的背景色，默认为 Colors.white。

应用栏

你可以通过提供以下参数来自定义应用栏：

• appBarCenterTitle: 指定是否将应用栏的标题居中，默认为 false。
• appBarElevation: 应用栏的阴影高度，默认为 4.0。
• appBarBackgroundColor: 应用栏的背景色，默认为 Colors.white。
• appBarHeight: 应用栏的高度，默认为 56.0。
• appBarTextStyle: 应用栏标题的文字样式，默认为 TextStyle(color: Colors.black)。

进度指示器

你可以通过提供以下参数来自定义进度指示器：

• progressIndicatorColor: 进度指示器的颜色，默认为 Colors.blue。
• progressIndicatorBackgroundColor: 进度指示器的背景色，默认为 Colors.grey。
• progressIndicatorSize: 进度指示器的大小，默认为 48.0。
• progressIndicatorStrokeWidth: 进度指示器的描边宽度，默认为 4.0。

按钮小部件

你可以通过提供以下参数来自定义按钮小部件：

• buttonStyle: 页面导航按钮的样式，默认为 ElevatedButton.styleFrom(primary: Colors.blue)。
• buttonHeight: 页面导航按钮的高度，默认为 48。
• buttonWidth: 页面导航按钮的宽度，默认为 double.infinity。
• buttonTextStyle: 页面导航按钮的文字样式，默认为 TextStyle(color: Colors.white)。
• backButtonIcon: 返回按钮的图标，默认为 Icons.arrow_back。

作者

• @juju149

示例代码

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:form_page_view/enum/progress_enum.dart';
import 'package:form_page_view/models/form_page_model.dart';
import 'package:form_page_view/form_page_view.dart';
import 'package:form_page_view/models/form_page_style.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 表单键
    final GlobalKey<FormState> formKeyPage1 = GlobalKey<FormState>();
    final GlobalKey<FormState> formKeyPage2 = GlobalKey<FormState>();
    final GlobalKey<FormState> formKeyPage3 = GlobalKey<FormState>();

    // 控制器
    final emailController = TextEditingController();
    final usernameController = TextEditingController();
    final firstNameController = TextEditingController();
    final lastNameController = TextEditingController();

    // 创建一个表示表单页面的 FormPageModel 对象列表
    final pages = [
      FormPageModel(
        formKey: formKeyPage1,
        title: 'Page 1',
        textButton: 'Next',
        body: Form(
          key: formKeyPage1,
          child: Column(
            children: [
              const SizedBox(height: 20),
              TextFormField(
                controller: usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter a username';
                  }
                  return null;
                },
              )
            ],
          ),
        ),
      ),
      FormPageModel(
        formKey: formKeyPage2,
        title: 'Page 2',
        textButton: 'Next',
        body: Form(
          key: formKeyPage2,
          child: Column(
            children: [
              const SizedBox(height: 20),
              TextFormField(
                controller: firstNameController,
                decoration: const InputDecoration(labelText: 'First Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your first name';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              TextFormField(
                controller: lastNameController,
                decoration: const InputDecoration(labelText: 'Last Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your last name';
                  }
                  return null;
                },
              ),
            ],
          ),
        ),
      ),
      FormPageModel(
        formKey: formKeyPage3,
        title: 'Page 3',
        textButton: 'Next',
        body: Form(
          key: formKeyPage3,
          child: Column(
            children: [
              const SizedBox(height: 20),
              TextFormField(
                controller: emailController,
                decoration: const InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  return null;
                },
              ),
            ],
          ),
        ),
      ),
    ];

    const style = FormPageStyle(
      backgroundColor: Colors.white,
      buttonHeight: 60,
    );

    return FormPageView(
      controller: PageController(),
      progress: ProgressIndicatorType.circular,
      pages: pages,
      style: style,
      onFormSubmitted: () {
        // 打印所有值
        print('Username: ${usernameController.text}');
        print('First Name: ${firstNameController.text}');
        print('Last Name: ${lastNameController.text}');
        print('Email: ${emailController.text}');
      },
    );
  }
}