Flutter UI样式管理插件tool_ui_styling的使用

tool_ui_styling 是一个用于 Flutter 的 UI 样式管理插件，旨在帮助开发者更高效地管理和应用 UI 样式。通过这个插件，开发者可以集中管理颜色、字体、尺寸等样式属性，并在整个应用中统一使用这些样式，从而提高代码的可维护性和一致性。

安装 tool_ui_styling

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

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

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

基本使用

1. 定义样式

你可以在项目中创建一个 styles.dart 文件，用于集中定义所有的样式。例如：

import 'package:tool_ui_styling/tool_ui_styling.dart';

class AppStyles {
  static final TextStyle heading1 = TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
  );

  static final TextStyle bodyText = TextStyle(
    fontSize: 16.0,
    color: Colors.black87,
  );

  static final Color primaryColor = Colors.blue;
}

2. 使用样式

在应用的任何地方，你可以直接使用这些定义好的样式。例如：

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App', style: AppStyles.heading1),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: AppStyles.bodyText,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: AppStyles.primaryColor,
        child: Icon(Icons.add),
      ),
    );
  }
}

高级功能

1. 主题管理

tool_ui_styling 还支持主题管理，你可以定义多个主题并在应用中进行切换。例如：

class AppThemes {
  static final ThemeData lightTheme = ThemeData(
    primaryColor: AppStyles.primaryColor,
    textTheme: TextTheme(
      headline1: AppStyles.heading1,
      bodyText1: AppStyles.bodyText,
    ),
  );

  static final ThemeData darkTheme = ThemeData.dark().copyWith(
    primaryColor: Colors.indigo,
    textTheme: TextTheme(
      headline1: AppStyles.heading1.copyWith(color: Colors.white),
      bodyText1: AppStyles.bodyText.copyWith(color: Colors.white70),
    ),
  );
}

在 MaterialApp 中使用主题：

import 'package:flutter/material.dart';
import 'styles.dart';
import 'themes.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppThemes.lightTheme,
      darkTheme: AppThemes.darkTheme,
      home: MyHomePage(),
    );
  }
}

2. 动态样式

你还可以使用 tool_ui_styling 提供的动态样式功能，根据应用的状态或用户偏好动态调整样式。例如：

class DynamicStyles {
  static TextStyle getDynamicTextStyle(BuildContext context) {
    return TextStyle(
      fontSize: 16.0,
      color: Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.black,
    );
  }
}

在 Widget 中使用动态样式：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App', style: AppStyles.heading1),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: DynamicStyles.getDynamicTextStyle(context),
        ),
      ),
    );
  }
}