Flutter自定义组件插件sheep_widgets的使用

Sheep Widgets 是一组我在多个项目开发过程中反复使用的自定义组件集合。其核心理念是将这些组件集中到一个中央仓库中，以最大化代码复用性和可读性。

功能特性

该插件目前包含两个主要功能：

• Widgets（组件）
  这些是从各个项目中提取出来的可复用组件，已添加到这个中央仓库中。

• Validators（验证器）
  验证器用于检查各种可复用表单字段（如 EmailInput 或 PhoneInput）中的输入数据是否正确。

开始使用

1. 安装插件

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

dependencies:
  sheep_widgets: ^0.0.1

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

flutter pub get

2. 使用示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 sheep_widgets 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:sheep_widgets/sheep_widgets.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sheep Widgets 示例'),
        ),
        body: Center(
          child: ExampleForm(), // 使用自定义表单组件
        ),
      ),
    );
  }
}

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

class _ExampleFormState extends State<ExampleForm> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _phone = '';

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      print('表单提交成功');
      print('邮箱: $_email');
      print('电话: $_phone');
    } else {
      print('表单验证失败，请检查输入');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Email 输入框
          EmailInput(
            onSaved: (value) => _email = value!,
            validator: SheepValidators.email, // 使用内置的邮箱验证器
          ),

          SizedBox(height: 20), // 添加间距

          // 手机号输入框
          PhoneInput(
            onSaved: (value) => _phone = value!,
            validator: SheepValidators.phone, // 使用内置的手机号验证器
          ),

          SizedBox(height: 20),

          // 提交按钮
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('提交表单'),
          )
        ],
      ),
    );
  }
}