Flutter设计系统插件gen_z_designs的使用

关于插件 gen_z_designs 的使用

GenZdesigns 是一个开源库，包含为 GenZ 设计的预先构建且易于定制的 UI 组件，旨在加快和简化开发过程。

特性

• GenZButton
• GenZCountdown

开始使用

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  gen_z_designs:

然后在你的 Dart 文件中导入该包：

import 'package:gen_z_designs/gen_z_designs.dart';

如何使用

GenZButton

以下是一些基本用法示例：

// 基本使用 GenZButton
GenZButton(
    onPressed: () {}, // 按钮点击事件
    text: "GenZdesign: Designs of new Generation.", // 按钮文本
);

// 带有边框的 GenZButton
GenZButton(
    onPressed: () {},
    text: "GenZdesign: Designs of new Generation.",
    type: GenZButtonType.OUTLINED, // 边框样式
);

// 透明背景的 GenZButton
GenZButton(
    onPressed: () {},
    text: "GenZdesign: Designs of new Generation.",
    type: GenZButtonType.TRANSPARENT, // 透明样式
);

// 使用其他属性
GenZPosition { LEADING, TRAILING, CENTER } // 对齐方式
GenZButtonShape { SQUARE, PILL, DEFAULT } // 形状
GenZSize { SMALL, MEDIUM, LARGE, XLARGE } // 大小
GenZButtonType { FILL, TRANSPARENT, OUTLINED, OUTLINED2X } // 按钮类型

带徽章的 GenZButton

// 在按钮外部添加徽章
GenZButton(
    text: "Text Button",
    onPressed: () {},
    badge: true, // 显示徽章
    type: GenZButtonType.OUTLINED,
    badgeColor: Colors.red, // 徽章颜色
);

// 在按钮内部添加徽章
GenZButton(
    text: "Text Button",
    onPressed: () {},
    badge: true,
    type: GenZButtonType.OUTLINED,
    badgeColor: Colors.amber,
    badgeType: BadgeType.INSIDE, // 徽章位置
    badgeText: const Icon(Icons.abc, size: 10), // 徽章图标
);

GenZCountdown

// 倒计时 300 秒
GenZCountdown(
   duration: Duration(seconds: 300), // 倒计时时间
   onDone: () => print("GenZ Sale Ended"), // 倒计时结束回调
);

// 递增计数到 300 秒
GenZCountdown(
   duration: Duration(seconds: 300),
   isIncremental: true, // 递增模式
   onDone: () => print("GenZ Sale Ended"),
);

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 gen_z_designs 包。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 带徽章的 GenZButton
            GenZButton(
              badge: true,
              onPressed: () {},
              type: GenZButtonType.OUTLINED,
              badgeColor: Colors.amber,
              badgePosition: const BadgePosition(left: 0),
              badgeType: BadgeType.INSIDE,
              badgeText: const Icon(Icons.abc, size: 18),
              text: "Text Button",
            ),
            // GenZCountdown
            GenZCountdown(
              // 销售时间是 2022-12-22 12:00 PM
              duration: Duration(
                milliseconds: DateTime.parse("2022-12-22 12:00:00")
                    .difference(DateTime.now())
                    .inMilliseconds,
              ),
            )
          ],
        ),
      ),
    );
  }
}