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

reusable_components_package 是一个用于创建自定义按钮、对话框和文本输入框的 Flutter 插件。通过该插件，开发者可以快速构建一致且美观的 UI 组件。

以下是如何使用 reusable_components_package 的完整示例。

安装插件

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

dependencies:
  reusable_components_package: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

使用示例

自定义按钮

import 'package:flutter/material.dart';
import 'package:reusable_components_package/reusable_components_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('reusable_components_package 示例'),
        ),
        body: Center(
          child: CustomButton(
            text: '点击我',
            onPressed: () {
              print('按钮被点击了！');
            },
            buttonColor: Colors.blue,
            textColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

效果图：

自定义对话框

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

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

class MyApp extends StatelessWidget {
  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return CustomDialog(
          title: '提示',
          content: Text('这是一个自定义对话框！'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('关闭'),
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('reusable_components_package 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _showDialog(context),
            child: Text('打开对话框'),
          ),
        ),
      ),
    );
  }
}

效果图：

自定义文本输入框

import 'package:flutter/material.dart';
import 'package:reusable_components_package/reusable_components_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('reusable_components_package 示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              CustomTextField(
                controller: _controller,
                labelText: '请输入内容',
                hintText: '这里输入...',
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print(_controller.text);
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}