Flutter自定义组件库插件custom_widgets_library的使用

自定义组件库

custom_widgets_library 是一个提供可重用且可定制的小部件的 Flutter 包。它旨在加速开发过程并提升您的 Flutter 应用程序的用户界面。目前，该包提供了按钮、文本字段和卡片等小部件，并特别强调了灵活性和易于使用性。

功能

• 可定制的按钮：创建具有不同颜色、大小和形状的按钮。
• 时尚的文本字段：轻松添加带有提示文本、图标和密码保护功能的文本输入框。
• 优雅的卡片：以可定制的颜色和阴影效果显示内容。

开始使用

前提条件

确保已安装 Flutter SDK。详情请参阅 Flutter 安装指南。

安装

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

dependencies:
  custom_widgets_library: ^0.0.1

然后运行以下命令来获取包：

flutter pub get

导入包

将包导入到 Dart 代码中：

import 'package:custom_widgets_library/custom_widgets_library.dart';

小部件概述

1. CustomButton

一个灵活的按钮小部件，允许您自定义文本、颜色、大小和回调操作。

CustomButton(
  text: '提交',
  onPressed: () {
    print('Button pressed!');
  },
  color: Colors.green,
  width: 150,
  height: 50,
)

属性

• text (String)：按钮上显示的文本。
• onPressed (VoidCallback)：按钮按下时的回调函数。
• color (Color?)：按钮的背景颜色（默认为 Colors.blue）。
• width (double?)：按钮的宽度（默认为 200）。
• height (double?)：按钮的高度（默认为 50）。

2. CustomTextField

一个可定制的文本输入框，支持提示文本、图标和密码保护功能。

CustomTextField(
  hintText: '请输入您的邮箱',
  prefixIcon: Icons.email,
  isPassword: false,
)

属性

• hintText (String)：当字段为空时显示的占位符文本。
• controller (TextEditingController?)：用于处理文本输入的控制器。
• isPassword (bool)：是否隐藏文本以进行密码输入（默认为 false）。
• prefixIcon (IconData?)：可选的图标，在字段开头显示。

3. CustomCard

一个简单的卡片，可以干净地显示内容，并支持可定制的颜色和阴影效果。

CustomCard(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: [
        Text('这是一个卡片'),
        Text('您可以在此添加任何内容！'),
      ],
    ),
  ),
  color: Colors.white,
  elevation: 3.0,
)

属性

• child (Widget)：卡片内要显示的内容。
• color (Color)：卡片的背景颜色（默认为 Colors.white）。
• elevation (double?)：卡片的阴影效果（默认为 2.0）。

示例

以下是一个如何一起使用 CustomButton、CustomTextField 和 CustomCard 的完整示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义组件库'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              CustomTextField(
                hintText: '用户名',
                prefixIcon: Icons.person,
              ),
              SizedBox(height: 20),
              CustomButton(
                text: '登录',
                onPressed: () {
                  print('登录按钮被按下');
                },
              ),
              SizedBox(height: 20),
              CustomCard(
                child: Column(
                  children: [
                    Text(
                      '欢迎使用自定义组件库！',
                      style: TextStyle(fontSize: 18),
                    ),
                    SizedBox(height: 10),
                    Text('这是一个自定义卡片小部件。'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

贡献

我们欢迎社区的贡献。要贡献：

1. 分叉仓库。
2. 创建新分支 (git checkout -b feature/your-feature-name)。
3. 进行更改并提交 (git commit -m '添加新功能')。
4. 推送更改 (git push origin feature/your-feature-name)。
5. 向主分支打开拉取请求。

请确保所有贡献都符合项目的编码风格，并经过测试覆盖。

许可证

该项目采用 MIT 许可证。详情请参阅 LICENSE 文件。

如有任何问题或反馈，请随时联系 [rensithudaragonalagoda@gmail.com]。

祝您编程愉快！🎉