Flutter UI组件库插件pure_ui_kit的使用

Flutter UI组件库插件pure_ui_kit的使用

一个灵感来源于Tailwind CSS的Flutter UI工具包，为您的应用程序提供优雅且可定制的组件。

特性

Pure UI Kit 目前提供了以下功能：

• 简单的“空状态”组件

  • 包含标题、描述和操作按钮

  

• 带虚线边框的“空状态”组件，适用于拖放区域或添加区域

  

• 步骤指示器

  • 子弹样式步骤指示器

  

• 圆圈样式步骤指示器

  

• 进度条样式步骤指示器

  

安装

在 pubspec.yaml 文件中添加 Pure UI Kit：

dependencies:
  pure_ui_kit: ^0.1.2

使用

简单的空状态

PureEmptyState.simple(
  title: 'Aucun projet', // 项目为空
  description: 'Commencez par créer un nouveau projet.', // 开始创建新项目
  buttonText: 'Nouveau Projet', // 新建项目
  onPressed: () {
    // 按钮点击事件
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
          content: Text('Création d\'un nouveau projet')), // 显示创建新项目的提示
    );
  },
);

带有虚线边框的空状态

PureEmptyState.withDashedBorder(
  title: 'Créer une nouvelle base de données', // 创建新的数据库
  onPressed: () {
    // 点击事件
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
          content: Text('Création d\'une nouvelle base de données')), // 显示创建新数据库的提示
    );
  },
);

步骤

Pure UI Kit 提供了三种类型的步骤指示器：子弹样式、圆圈样式和进度条样式。

基本用法

// 子弹步骤
PureStep.bullet(
  currentStep: 2, // 当前步骤
  totalSteps: 4, // 总共步骤数
  onStepTap: (step) {
    // 点击步骤时触发的回调
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Tapped on step $step')), // 显示点击步骤的提示
    );
  },
);

// 圆圈步骤
PureStep.circle(
  currentStep: 4, // 当前步骤
  totalSteps: 5, // 总共步骤数
  onStepTap: (step) {
    // 点击步骤时触发的回调
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Tapped on step $step')), // 显示点击步骤的提示
    );
  },
);

// 进度条步骤
PureStep.progressBar(
  currentStep: 3, // 当前步骤
  totalSteps: 4, // 总共步骤数
  progressLabel: 'Migrating MySQL database...', // 进度条标签
  onStepTap: (step) {
    // 点击步骤时触发的回调
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Tapped on step $step')), // 显示点击步骤的提示
    );
  },
);

自定义

您可以使用 PureStepTheme 来自定义步骤的外观：

PureTheme(
  stepTheme: const PureStepTheme(
    activeColor: Colors.blue, // 当前步骤的颜色
    inactiveColor: Colors.grey, // 未完成步骤的颜色
    completedColor: Colors.blue, // 已完成步骤的颜色
    lineWidth: 60, // 圆形步骤的连接线宽度
    lineHeight: 1.5, // 连接线和进度条的高度
    circleSize: 24, // 圆形指示器的大小
    dotSize: 6, // 子弹指示器的大小
    spacing: 8, // 元素之间的间距
    labelStyle: TextStyle(
      fontSize: 14, // 文字大小
      fontWeight: FontWeight.w500, // 文字粗细
    ),
  ),
  child: MaterialApp(
    // 您的应用程序
  ),
);

可用属性：

• activeColor: 当前步骤的颜色
• inactiveColor: 未完成步骤的颜色
• completedColor: 已完成步骤的颜色
• lineWidth: 圆形步骤的连接线宽度
• lineHeight: 连接线和进度条的高度
• circleSize: 圆形指示器的大小
• dotSize: 子弹指示器的大小
• spacing: 元素之间的间距
• labelStyle: 文字样式

主题定制

您可以使用 PureTheme 来自定义组件的外观：

PureTheme(
  emptyStateTheme: const PureEmptyStateTheme(
    titleStyle: TextStyle(
      fontSize: 16, // 标题文字大小
      fontWeight: FontWeight.bold, // 标题文字粗细
      color: Colors.indigo, // 标题文字颜色
    ),
    iconColor: Colors.indigo, // 图标颜色
    dashedBorderColor: Colors.indigo, // 虚线边框颜色
  ),
  child: MaterialApp(
    // 您的应用程序
  ),
);

即将推出

即将添加的新组件包括：

• 按钮
• 表单字段
• 卡片
• 弹窗
• 更多！

贡献

欢迎贡献！您可以：

1. Fork 该项目
2. 创建一个特性分支
3. 提交您的更改
4. 推送到该分支
5. 打开一个 Pull Request

许可证

该项目采用 BSD 3-Clause 许可证。详情请参阅 LICENSE 文件。

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PureTheme(
      emptyStateTheme: const PureEmptyStateTheme(
        titleStyle: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
          color: Colors.indigo,
        ),
        iconColor: Colors.indigo,
        dashedBorderColor: Colors.indigo,
      ),
      child: MaterialApp(
        title: 'Pure UI Kit Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
          useMaterial3: true,
        ),
        home: const DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pure UI Kit Demo'),
      ),
      body: SafeArea(
        minimum: const EdgeInsets.all(16),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'Simple Empty State',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureEmptyState.simple(
                title: 'Aucun projet',
                description: 'Commencez par créer un nouveau projet.',
                buttonText: 'Nouveau Projet',
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content: Text('Création d\'un nouveau projet')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Empty State with Dashed Border',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureEmptyState.withDashedBorder(
                title: 'Créer une nouvelle base de données',
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content:
                            Text('Création d\'une nouvelle base de données')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Bullet',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.bullet(
                currentStep: 2,
                totalSteps: 4,
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Circle',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.circle(
                currentStep: 4,
                totalSteps: 5,
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Progress Bar',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.progressBar(
                currentStep: 3,
                totalSteps: 4,
                progressLabel: 'Migrating MySQL database...',
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
            ],
          ),
        ),
      ),
    );
  }
}