Flutter UI组件库插件sweet_ui的使用

Sweet UI 是一个基于 Flutter 的 UI 库，它提供了一系列可直接使用的组件，并且支持以链式调用的方式进行配置。Sweet UI 提供了大部分基础的 Tailwind CSS 类样式，并且还有一些自定义组件。

安装

首先，在 pubspec.yaml 文件中添加 Sweet UI 依赖：

dependencies:
  sweet_ui: ^版本号

然后运行以下命令安装依赖：

flutter pub get

使用示例

以下是一个简单的示例，展示如何使用 Sweet UI 的基本功能。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sweet UI 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 Sweet Button
              SweetButton(
                text: '点击我',
                onPressed: () {
                  print('按钮被点击了');
                },
              ),

              SizedBox(height: 20),

              // 使用 Sweet Card
              SweetCard(
                padding: EdgeInsets.all(16),
                child: Column(
                  children: [
                    Text(
                      '这是一个卡片组件',
                      style: TextStyle(fontSize: 18),
                    ),
                    SizedBox(height: 10),
                    Text(
                      '你可以在这里放置任何内容',
                      style: TextStyle(fontSize: 14),
                    ),
                  ],
                ),
              ),

              SizedBox(height: 20),

              // 使用 Sweet Input
              SweetInput(
                placeholder: '请输入内容',
                onChanged: (value) {
                  print('输入的内容是: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果图

以下是上述代码运行后的效果：

自定义组件

Sweet UI 还提供了一些自定义组件，例如 SweetCheckbox 和 SweetRadio，可以快速构建表单。

示例代码

Column(
  children: [
    // 使用 Sweet Checkbox
    SweetCheckbox(
      value: true,
      onChanged: (value) {
        print('复选框状态: $value');
      },
    ),

    SizedBox(height: 20),

    // 使用 Sweet Radio
    SweetRadio(
      groupValue: 'A',
      value: 'B',
      onChanged: (value) {
        print('选择的值是: $value');
      },
    ),
  ],
)

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

songsunli 1楼

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

sweet_ui 是一个 Flutter UI 组件库插件，旨在提供一组美观且易于使用的 UI 组件，帮助开发者快速构建高质量的 Flutter 应用程序。以下是如何使用 sweet_ui 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 sweet_ui 包：

import 'package:sweet_ui/sweet_ui.dart';

3. 使用组件

sweet_ui 提供了多种 UI 组件，你可以直接在项目中使用它们。以下是一些常见组件的示例：

按钮组件

SweetButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  color: Colors.blue,
  textColor: Colors.white,
)

卡片组件

SweetCard(
  child: Column(
    children: [
      Text('Card Title', style: TextStyle(fontSize: 20)),
      SizedBox(height: 10),
      Text('This is a sweet card component.'),
    ],
  ),
)

输入框组件

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

加载指示器

SweetLoadingIndicator(
  size: 50.0,
  color: Colors.blue,
)

对话框组件

SweetDialog.show(
  context: context,
  title: 'Sweet Dialog',
  content: 'This is a sweet dialog component.',
  actions: [
    SweetDialogAction(
      text: 'OK',
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ],
)

4. 自定义主题

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

SweetTheme(
  primaryColor: Colors.blue,
  accentColor: Colors.orange,
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    bodyText1: TextStyle(fontSize: 16, color: Colors.black),
  ),
  child: MyApp(),
)

5. 其他组件

sweet_ui 还提供了其他一些有用的组件，如 SweetAppBar、SweetBottomNavigationBar、SweetSnackBar 等。你可以根据需要在项目中使用它们。

6. 示例代码

以下是一个简单的示例，展示了如何使用 sweet_ui 中的一些组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SweetTheme(
      primaryColor: Colors.blue,
      accentColor: Colors.orange,
      child: MaterialApp(
        home: Scaffold(
          appBar: SweetAppBar(
            title: Text('Sweet UI Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SweetButton(
                  onPressed: () {
                    SweetDialog.show(
                      context: context,
                      title: 'Sweet Dialog',
                      content: 'This is a sweet dialog component.',
                      actions: [
                        SweetDialogAction(
                          text: 'OK',
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    );
                  },
                  text: 'Show Dialog',
                ),
                SizedBox(height: 20),
                SweetTextField(
                  hintText: 'Enter your name',
                  onChanged: (value) {
                    print('Input: $value');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}