Flutter UI组件插件tarka_ui的使用

tarka_ui 是一个开源的 Flutter UI 组件库，旨在为开发者提供一组高质量、可定制的 UI 组件，以加速 Flutter 应用程序的开发。它包含了许多常用的 UI 组件，如按钮、卡片、对话框、表单元素等。

以下是使用 tarka_ui 的基本步骤和示例：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 tarka_ui：

import 'package:tarka_ui/tarka_ui.dart';

3. 使用组件

tarka_ui 提供了许多现成的组件，你可以直接在代码中使用它们。以下是一些常用组件的示例：

按钮 (TarkaButton)

TarkaButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Click Me'),
)

卡片 (TarkaCard)

TarkaCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a simple card.'),
    ],
  ),
)

对话框 (TarkaDialog)

TarkaDialog(
  title: Text('Alert'),
  content: Text('This is a dialog.'),
  actions: [
    TarkaButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text('OK'),
    ),
  ],
)

表单输入 (TarkaTextField)

TarkaTextField(
  labelText: 'Username',
  hintText: 'Enter your username',
  onChanged: (value) {
    print('Username: $value');
  },
)

加载指示器 (TarkaProgressIndicator)

TarkaProgressIndicator()

4. 自定义主题

tarka_ui 允许你自定义主题以适应你的应用程序设计。你可以通过 TarkaTheme 来设置全局的主题样式：

MaterialApp(
  theme: TarkaTheme.light(), // 使用默认的浅色主题
  home: MyHomePage(),
)

你也可以自定义主题：

MaterialApp(
  theme: TarkaTheme(
    primaryColor: Colors.blue,
    accentColor: Colors.green,
    // 其他自定义属性
  ),
  home: MyHomePage(),
)

5. 响应式设计

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

TarkaResponsive(
  mobile: MobileLayout(),
  tablet: TabletLayout(),
  desktop: DesktopLayout(),
)