Flutter主题插件flutter_gruvbox_theme的使用

Gruvbox Theme for Flutter

复古风格主题插件，基于Gruvbox配色方案。

初始版本来源于flutter_nord_theme。
版权所有 © 2021 Firefnix

开始使用

在使用该插件之前，请先将其添加到pubspec.yaml文件中：

dependencies:
  flutter_gruvbox_theme: <latest version>

然后运行以下命令以更新依赖项：

flutter pub get

使用方法

1. 在需要使用主题的文件中导入插件：

import 'package:flutter_gruvbox_theme/flutter_gruvbox_theme.dart';

1. 在MaterialApp中设置主题为GruvboxTheme.light()或GruvboxTheme.dark()：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.light, // 或 ThemeMode.dark
      theme: GruvboxTheme.light(), // 轻量模式主题
      darkTheme: GruvboxTheme.dark(), // 深色模式主题
      home: Scaffold(
        appBar: AppBar(title: const Text('Title')), // 应用标题
        body: const Center(child: Text('Example text.')), // 中心文本
      ),
    );
  }
}

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用flutter_gruvbox_theme插件：

// 这是一个简单的示例，展示如何使用 flutter_gruvbox_theme。
// 更完整的示例可以在 `/example/full_example/` 文件夹中找到。
//
// 要测试此主题，请创建一个空的Flutter项目，并将以下内容复制到您的 `main.dart` 文件中。
import 'package:flutter/material.dart';
import 'package:flutter_gruvbox_theme/flutter_gruvbox_theme.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.light, // 或 ThemeMode.dark
      theme: GruvboxTheme.light(), // 设置轻量模式主题
      darkTheme: GruvboxTheme.dark(), // 设置深色模式主题
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gruvbox 主题示例'), // 应用标题
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            Text(
              '欢迎使用 Gruvbox 主题！', // 显示的文本
              style: TextStyle(fontSize: 20), // 设置字体大小
            ),
            SizedBox(height: 20), // 添加间距
            ElevatedButton(
              onPressed: () {}, // 按钮点击事件
              child: Text('按钮'), // 按钮文字
            )
          ],
        ),
      ),
    );
  }
}