Flutter样式管理插件awesome_styles的使用

当然，以下是如何在Flutter项目中使用awesome_styles插件进行样式管理的代码示例。awesome_styles是一个用于集中管理应用样式的Flutter插件，它允许你定义主题和样式，并在整个应用中重复使用。

首先，确保你已经将awesome_styles插件添加到了你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  awesome_styles: ^最新版本号

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

1. 定义样式

创建一个新的Dart文件，例如styles.dart，来定义你的应用样式：

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

// 定义一个主题
final AppTheme appTheme = AppTheme(
  light: LightThemeData(
    primaryColor: Colors.blue,
    secondaryColor: Colors.green,
    backgroundColor: Colors.white,
    textStyle: TextStyle(
      color: Colors.black,
      fontSize: 16,
    ),
    // 可以添加更多的样式定义
  ),
  dark: DarkThemeData(
    primaryColor: Colors.grey[800]!,
    secondaryColor: Colors.blueGrey[600]!,
    backgroundColor: Colors.black,
    textStyle: TextStyle(
      color: Colors.white,
      fontSize: 16,
    ),
    // 可以添加更多的样式定义
  ),
);

// 定义全局的样式
final GlobalStyles globalStyles = GlobalStyles(
  textStyle: TextStyle(
    fontFamily: 'Roboto',
    fontWeight: FontWeight.normal,
  ),
  buttonStyle: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.grey.withOpacity(0.2)),
  ),
  // 可以添加更多的全局样式定义
);

2. 应用样式

在你的main.dart或其他组件文件中，应用这些样式：

// main.dart
import 'package:flutter/material.dart';
import 'package:awesome_styles/awesome_styles.dart';
import 'styles.dart'; // 导入你定义的样式文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: appTheme.light.primaryColor,
        ).copyWith(
          background: appTheme.light.backgroundColor,
        ),
        textTheme: TextTheme(
          bodyText1: appTheme.light.textStyle,
        ),
      ),
      darkTheme: ThemeData.from(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: appTheme.dark.primaryColor,
        ).copyWith(
          background: appTheme.dark.backgroundColor,
        ),
        textTheme: TextTheme(
          bodyText1: appTheme.dark.textStyle,
        ),
      ),
      themeMode: ThemeMode.system, // 或者 ThemeMode.light / ThemeMode.dark
      home: MyHomePage(),
      // 使用 GlobalStylesWrapper 来应用全局样式
      builder: (context, child) => GlobalStylesWrapper(
        globalStyles: globalStyles,
        child: child,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: Theme.of(context).textTheme.bodyText1, // 使用主题中的文本样式
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
        // 使用全局按钮样式
        style: ButtonStyle(
          overlayColor: MaterialStateProperty.resolveWith<Color?>(
            (Set<MaterialState> states) {
              return globalStyles.buttonStyle.overlayColor?.resolve(states);
            },
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

3. 运行应用

确保所有文件保存后，运行你的Flutter应用。现在，你的应用应该应用了你在styles.dart文件中定义的样式。

通过这种方式，你可以轻松地在整个Flutter应用中集中管理和复用样式，使得代码更加清晰和可维护。