Flutter通用工具插件common_utilities_flutter的使用

概述

common_utilities_flutter 是一个功能强大的工具集合，旨在帮助 Flutter 开发者简化开发流程。它提供了状态管理、表单验证、UI增强以及更多实用的功能。通过这些工具，您可以编写更加简洁、可维护的代码，并显著提高开发效率。

特性

• 状态管理: 提供简单易用的状态管理工具。
• 表单验证: 提供便捷的表单验证器。
• UI增强: 提供自定义的小部件和辅助工具，提升用户体验。
• 实用函数: 提供处理常见任务的实用函数。

安装

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

dependencies:
  common_utilities_flutter: ^1.0.0

然后运行以下命令以更新依赖项：

flutter pub get

使用示例

状态管理示例

以下是一个简单的状态管理示例，展示如何使用 common_utilities_flutter 来管理计数器的状态。

1. 创建一个简单的状态管理逻辑

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

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

class _CounterPageState extends State<CounterPage> {
  // 使用 StateManager 管理状态
  final StateManager _counterManager = StateManager(initialValue: 0);

  void _incrementCounter() {
    _counterManager.update((value) => value + 1);
  }

  void _decrementCounter() {
    _counterManager.update((value) => value - 1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('状态管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示当前状态
            Text(
              '当前计数: ${_counterManager.state}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // 增加计数按钮
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('增加'),
            ),
            SizedBox(height: 10),
            // 减少计数按钮
            ElevatedButton(
              onPressed: _decrementCounter,
              child: Text('减少'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 运行效果

运行上述代码后，您将看到一个简单的计数器页面，可以通过点击按钮来增加或减少计数器的值。

表单验证示例

接下来是一个表单验证的示例，展示如何使用 common_utilities_flutter 来验证用户输入。

1. 创建一个简单的表单

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

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

class _FormValidationPageState extends State<FormValidationPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      print('表单验证成功');
    } else {
      print('表单验证失败');
    }
  }

  [@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: _emailController,
                decoration: InputDecoration(labelText: '邮箱'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入邮箱';
                  }
                  if (!RegExp(r'^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$').hasMatch(value)) {
                    return '请输入有效的邮箱地址';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _passwordController,
                obscureText: true,
                decoration: InputDecoration(labelText: '密码'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  if (value.length < 6) {
                    return '密码长度不能小于6位';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}