Flutter可重用组件插件reusable_widget_package的使用

简介

reusable_widget_package 是一个包含可重用组件的包，旨在简化和优化 Flutter 应用程序的代码。通过使用这些组件，开发者可以减少重复代码并提高开发效率。

文档说明

要使用 reusable_widget_package，首先需要将其添加到项目的依赖项中，并在代码中导入它。以下是完整的步骤和示例代码：

1. 添加依赖项

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

dependencies:
  reusable_widget_package: ^1.0.0 # 请根据实际版本号进行调整

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

flutter pub get

2. 导入包

在需要使用该包的 Dart 文件中导入：

import 'package:reusable_widget_package/reusable_widget_package.dart';

3. 使用示例

示例 1: 使用 ReusableButton 组件

ReusableButton 是一个简单的按钮组件，支持自定义文本、颜色和点击事件。

import 'package:flutter/material.dart';
import 'package:reusable_widget_package/reusable_widget_package.dart'; // 导入包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('可重用组件示例')),
        body: Center(
          child: ReusableButton( // 使用 ReusableButton 组件
            text: '点击我',
            backgroundColor: Colors.blue,
            textColor: Colors.white,
            onPressed: () {
              print('按钮被点击了');
            },
          ),
        ),
      ),
    );
  }
}

效果展示：

示例 2: 使用 ReusableTextField 组件

ReusableTextField 是一个可重用的文本输入框组件，支持占位符、键盘类型等配置。

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

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

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('可重用组件示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ReusableTextField( // 使用 ReusableTextField 组件
                hintText: '请输入内容',
                keyboardType: TextInputType.text,
                controller: _controller,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print(_controller.text); // 获取输入内容
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}