Flutter UI设计插件tekflat_design的使用

✨ 特性

🌈 企业级UI设计：适用于Web、Android、IOS、MACOS、Linux、Windows应用。
📦 开箱即用的高质量Flutter小部件。
🛡 使用纯Dart编写，支持空安全。

🖥 环境支持

在Windows和Mac OS上运行。

📦 安装

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

flutter pub add tekflat_design

🔨 使用

1. 样例代码

以下是一个简单的使用示例，展示了如何使用tekflat_design的主题和按钮组件。

import 'package:tekflat_design/tekflat_design.dart';

void main() {
    runApp(
        const MaterialApp(
          // TekFlatDesign 提供了两种主题：亮色和暗色
          // 您可以使用其中一种或两种主题，也可以创建自己的主题
          theme: TekThemes.light,
          home: Scaffold(
            body: Center(
              child: TekButton(onPressed: () {}, text: '点击我'),
            ),
          ),
        ),
    );
}

2. 响应式布局

通过TekResponsive类实现响应式布局，可以根据设备类型（桌面、平板、移动设备）动态调整UI。

import 'package:tekflat_design/tekflat_design.dart';

void main() {
    runApp(
        const MaterialApp(
          theme: TekThemes.light,
          home: TekResponsive.appResBuilder(
            // 初始化屏幕设备类型：桌面、平板、移动设备
            child: Scaffold(
              body: TekResponsive.resBuilder(
                // 设置默认屏幕
                children: Center(
                  child: TekTypography(text: '默认屏幕'),
                ),
                desktop: Center(
                  child: TekTypography(text: '桌面屏幕'),
                ),
                tablet: Center(
                  child: TekTypography(text: '平板屏幕'),
                ),
                mobile: Center(
                  child: TekTypography(text: '移动设备屏幕'),
                ),
              ),
            ),
          ),
        ),
    );
}

Null Safety

tekflat_design 是用Dart编写的，并且支持空安全。

🔗 链接

⌨️ 开发

您可以使用GitHub进行开发。
或者在本地克隆项目：

$ git clone git@github.com:nghetien/tekflat_design.git
$ cd tekflat_design
$ flutter pub get
$ flutter run

更多关于Flutter UI设计插件tekflat_design的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

更多关于Flutter UI设计插件tekflat_design的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

tekflat_design 是一个为 Flutter 提供的 UI 组件库，旨在帮助开发者快速构建美观且功能丰富的用户界面。它提供了一系列预定义的组件和样式，使开发者能够更专注于业务逻辑而非界面细节。

以下是如何在 Flutter 项目中使用 tekflat_design 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  tekflat_design: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入库

在你的 Dart 文件中导入 tekflat_design：

import 'package:tekflat_design/tekflat_design.dart';

3. 使用组件

tekflat_design 提供了多种 UI 组件，例如按钮、输入框、卡片、对话框等。以下是一些常见组件的使用示例：

按钮 (TekButton)

TekButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  type: TekButtonType.primary,
  size: TekButtonSize.medium,
)

输入框 (TekInput)

TekInput(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input value: $value');
  },
)

卡片 (TekCard)

TekCard(
  child: Text('This is a card'),
  elevation: 4,
  margin: EdgeInsets.all(16),
)

对话框 (TekDialog)

TekDialog.show(
  context: context,
  title: 'Alert',
  content: Text('This is a dialog.'),
  actions: [
    TekButton(
      onPressed: () {
        Navigator.pop(context);
      },
      text: 'Close',
    ),
  ],
)

4. 自定义主题

tekflat_design 允许你自定义主题以适应你的应用风格。你可以通过 TekTheme 来设置全局主题：

void main() {
  runApp(
    TekTheme(
      data: TekThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.orange,
        textTheme: TekTextTheme(
          headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 16, color: Colors.black),
        ),
      ),
      child: MyApp(),
    ),
  );
}

5. 响应式设计

tekflat_design 还支持响应式设计，你可以使用 TekResponsive 组件来根据屏幕大小调整布局：

TekResponsive(
  mobile: Text('Mobile View'),
  tablet: Text('Tablet View'),
  desktop: Text('Desktop View'),
)

6. 其他组件

tekflat_design 还提供了许多其他组件，如 TekAppBar、TekDrawer、TekListTile 等，你可以根据需要查阅官方文档或源码来了解更多信息。

7. 运行项目

完成上述步骤后，你可以运行你的 Flutter 项目，查看 tekflat_design 组件的效果：

flutter run