Flutter UI组件插件shoko_ui的使用

Flutter UI组件插件shoko_ui的使用

简介

Shoko UI 是一个为 Flutter 提供现成小部件的用户界面库。它允许开发者快速设置应用程序的主题，并提供了多种可立即使用的组件，如开关、文本框和按钮等。此外，该库还计划在未来添加更多功能，如徽章、单选按钮、复选框、代码字段、Snackbar、AppBar、进度条、Scaffold 以及模态窗口等。

功能特点

• 应用主题设置
  • 自定义每个库组件的主题
  • 设置背景主题
  • 设置内容主题
  • 提供一组可自定义的文字样式
• 现成的小部件
  • Switch（开关）
  • TextField（文本框）
  • Button（按钮）
• 即将推出的小部件
  • Badge（徽章）
  • Radio（单选按钮，正在重写中）
  • Checkbox（复选框）
  • Code Field（代码字段，正在重写中）
  • Snackbar（提示信息）
  • AppBar（应用栏）
  • Progress（进度条）
  • Scaffold（支架）
• 模态窗口
  • DialogBase, Dialog
  • ModalBottomSheetBase, ModalBottomSheet
  • Popover

示例代码

以下是一个完整的示例代码，展示了如何使用 shoko_ui 插件来创建一个简单的 Flutter 应用程序。该应用程序包含了一个带有两个按钮的页面，并且可以通过切换开关来改变主题颜色。

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

// 定义白色主题
const whiteTheme = STheme(switchTheme: SSwitchTheme(backgroundColor: Colors.black));

// 定义深色主题
const darkTheme = STheme(switchTheme: SSwitchTheme(backgroundColor: Colors.red));

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SThemeWidget(
        // 设置 Shoko UI 的主题
        shokoUITheme: STheme(
          badgeTheme: SBadgeTheme(
            alertColor: Colors.red, 
            textAlertColor: Colors.white
          ),
          contentTheme: SContentColors(
            primary: Colors.black,
            invertPrimary: Colors.white,
            secondary: Color.fromRGBO(155, 155, 155, 1),
            tertiary: Color.fromRGBO(64, 64, 64, 1),
            brand: Color.fromRGBO(126, 127, 251, 1),
            success: Colors.green,
            alert: Colors.red,
          ),
          backgroundTheme: SBackgroundColors(
            primary: Colors.white,
            secondary: Color.fromRGBO(250, 250, 250, 1),
            tertiary: Color.fromRGBO(235, 237, 240, 1),
            brand: Color.fromRGBO(126, 127, 251, 1),
            brandLight: Color.fromRGBO(229, 229, 254, 1),
            success: Colors.green,
            successLight: Color.fromRGBO(229, 255, 237, 1),
            alert: Colors.red,
            alertLight: Color.fromRGBO(255, 233, 232, 1),
          ),
        ),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool state = false;

  void onChanged(bool value) {
    setState(() {
      state = value;
    });
    // 切换主题
    context.changeTheme(state ? whiteTheme : darkTheme);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.theme.backgroundTheme.secondary, // 设置背景颜色
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 带有边框的按钮
            SButton(
              onTap: () {}, // 点击事件
              isOutline: true, // 是否带边框
              child: SButtonContent.text('Button'), // 按钮内容
              color: Colors.purple, // 按钮颜色
            ),
            // 普通按钮
            SButton(
              onTap: () {}, // 点击事件
              child: SButtonContent.text('Button'), // 按钮内容
              color: Colors.purple, // 按钮颜色
            ),
          ],
        ),
      ),
    );
  }
}