Flutter浮动操作按钮插件 form_floating_action_button 的使用

简介

form_floating_action_button 是一个为 Flutter 应用中的浮动操作按钮（FAB）添加基本表单功能的插件。它可以帮助你在表单提交时进行验证和处理。

Demo

• Live Web Example
• 

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  form_floating_action_button: any

使用示例

导入包

首先，导入 form_floating_action_button.dart 包：

import 'package:form_floating_action_button/form_floating_action_button.dart';

在表单中使用

以下是一个完整的示例，展示了如何在表单中使用 FormFloatingActionButton：

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

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

class _FormValidatePageState extends State<FormValidatePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final FormFloatingActionButtonController _controller = FormFloatingActionButtonController();
  bool _loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validate'),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: ListView(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
                validator: (value) {
                  if (value?.isEmpty ?? true) {
                    return 'Email is required';
                  } else if (!value!.contains('@') || !value.contains('.')) {
                    return 'Email is not valid';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                ),
                obscureText: true,
                validator: (value) {
                  if (value?.isEmpty ?? true) {
                    return 'Password is required';
                  }
                  return null;
                },
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FormFloatingActionButton(
        controller: _controller,
        loading: _loading,
        onSubmit: () async {
          if (_formKey.currentState?.validate() ?? false) {
            setState(() => _loading = true);
            await Future.delayed(Duration(seconds: 3));
            setState(() => _loading = false);
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Form Submitted')));
          }
        },
      ),
    );
  }
}

自定义验证逻辑

你也可以自定义验证逻辑，例如：

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

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

class _OnValidatePageState extends State<OnValidatePage> {
  bool _validateSuccess = true;
  bool _loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('On Validate'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            onTap: () {
              setState(() => _validateSuccess = !_validateSuccess);
            },
            title: Text('Validation Successful'),
            trailing: IgnorePointer(
              child: Switch(
                value: _validateSuccess,
                onChanged: (_) {},
              ),
            ),
          )
        ],
      ),
      floatingActionButton: FormFloatingActionButton(
        loading: _loading,
        onSubmit: () async {
          setState(() => _loading = true);
          await Future.delayed(Duration(seconds: 3));
          setState(() => _loading = false);
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Form Submitted')));
        },
        onValidate: () {
          return Future.value(_validateSuccess);
        },
      ),
    );
  }
}

完整的示例项目结构

以下是完整的示例项目结构，包含主页面和两个子页面：

import 'package:flutter/material.dart';

import 'src/page_form_validate.dart';
import 'src/page_on_validate.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Form FAB Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Form FAB Example'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) {
                      return const PageOnValidate();
                    },
                  ),
                );
              },
              child: const Text('On Validate Example'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) {
                      return const PageFormValidate();
                    },
                  ),
                );
              },
              child: const Text('Form Validate Example'),
            ),
          ],
        ),
      ),
    );
  }
}