SproutTogeDesign 是一个用于 Flutter 的界面设计插件，旨在帮助开发者快速构建美观且一致的 UI。它提供了一系列预定义的组件、样式和布局工具，可以显著减少开发时间并提高代码的可维护性。

以下是如何使用 SproutTogeDesign 插件的基本步骤：

1. 安装插件

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

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

然后运行 flutter pub get 来安装插件。

2. 导入插件

在你的 Dart 文件中导入 sprout_toge_design：

import 'package:sprout_toge_design/sprout_toge_design.dart';

3. 使用预定义组件

SproutTogeDesign 提供了许多预定义的组件，例如按钮、卡片、文本样式等。你可以直接使用这些组件来构建你的 UI。

示例：使用按钮组件

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SproutTogeDesign Example'),
      ),
      body: Center(
        child: STButton(
          onPressed: () {
            print('Button Pressed');
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

4. 使用预定义样式

SproutTogeDesign 还提供了一些预定义的样式，例如颜色、字体、间距等。你可以使用这些样式来保持 UI 的一致性。

示例：使用预定义颜色

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SproutTogeDesign Example'),
        backgroundColor: STColors.primary,
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            color: STColors.secondary,
            fontSize: 24,
          ),
        ),
      ),
    );
  }
}

5. 自定义主题

你可以通过自定义主题来覆盖 SproutTogeDesign 的默认样式，以适应你的应用设计需求。

示例：自定义主题

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SproutTogeDesign Example',
      theme: ThemeData(
        primaryColor: STColors.primary,
        accentColor: STColors.secondary,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16, color: STColors.textPrimary),
          bodyText2: TextStyle(fontSize: 14, color: STColors.textSecondary),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

6. 使用布局工具

SproutTogeDesign 还提供了一些布局工具，例如间距、对齐方式等，帮助你更轻松地构建复杂的布局。

示例：使用间距工具

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SproutTogeDesign Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(STSpacing.medium),
        child: Column(
          children: [
            Text('Item 1'),
            SizedBox(height: STSpacing.small),
            Text('Item 2'),
            SizedBox(height: STSpacing.small),
            Text('Item 3'),
          ],
        ),
      ),
    );
  }
}

7. 响应式设计

SproutTogeDesign 还支持响应式设计，你可以根据屏幕大小动态调整布局和样式。

示例：响应式设计

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SproutTogeDesign Example'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 600) {
            return Row(
              children: [
                Expanded(
                  child: Text('Left Column'),
                ),
                Expanded(
                  child: Text('Right Column'),
                ),
              ],
            );
          } else {
            return Column(
              children: [
                Text('Top Row'),
                Text('Bottom Row'),
              ],
            );
          }
        },
      ),
    );
  }
}