Flutter主题生成插件theme_generator_x的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter主题生成插件theme_generator_x的使用

安装

首先，你需要安装 theme_generator_x 插件作为全局命令行工具。在终端中运行以下命令：

dart pub global activate theme_generator_x

参数说明

  • input - 输入 JSON 文件的路径。
  • output - 输出 Dart 文件的路径。
  • class_name - 生成扩展类的名称，例如 AppThemeDataColorsX。
  • use_dark - 是否生成暗色主题。默认为 false。
  • keys_rename - 如何重命名 JSON 键。可选值有 camel_case、original 和 snake_case。

JSON 结构

你可以使用不同的 JSON 键值结构来定义颜色。

  1. 单个颜色

    {
    "primary": "#f6f4da",
    "secondary": "0xff9e9e9e",
    "some_color": "#ff000011"
}

  2. 颜色数组

    {
    "composite": [
        "#f6f4da",
        "0xff9e9e9e"
    ]
}

  3. 复杂键值对

    {
    "test_color_simple": {
        "light": "#000011"
    },
    "test_color": {
        "dark": "#656213",
        "light": "#000011"
    }
}

  4. 数组中的复杂映射

    {
    "simple_map_of_array": {
        "light": [
            "#656213",
            "#000011"
        ]
    },
    "simple_map_of_array_dark": {
        "light": [
            "#995577",
            "#000011"
        ],
        "dark": [
            "#110022",
            "#000000"
        ]
    }
}

使用示例

假设你有一个名为 example/test_schema.json 的 JSON 文件，并希望将其转换为一个 Dart 文件 example/output.dart，并命名为 AppThemeDataColorsX。可以使用以下命令：

theme_generator_x colors --input example/test_schema.json --output example/output.dart --class_name AppThemeDataColorsX

Flutter 中的使用

现在你已经生成了扩展类，可以在 Flutter 应用中使用它。例如，在 MaterialApp 中添加自定义主题：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        extensions: [
          lightAppThemeDataColorsXData(),
        ],
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Theme Generator')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

AppThemeDataColorsX lightAppThemeDataColorsXData() {
  return const AppThemeDataColorsX(
    primary: Color(0xfff6f4da),
    secondary: Color(0xff9e9e9e),
    someColor: Color(0xff000011),
    testColorSimple: Color(0xff000011),
    testColor: Color(0xff666213),
    simpleMapOfArray: [
      Color(0xff656213),
      Color(0xff000011)
    ],
    simpleMapOfArrayDark: [
      Color(0xff995577),
      Color(0xff000011)
    ],
    composite: Color(0xfff6f4da),
  );
}

更多关于Flutter主题生成插件theme_generator_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter主题生成插件theme_generator_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter主题生成插件theme_generator_x的代码案例。这个插件可以帮助你动态生成和应用主题。假设你已经将这个插件添加到了你的pubspec.yaml文件中。

首先，确保你已经添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  theme_generator_x: ^最新版本号  # 请替换为实际最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们可以创建一个Flutter应用，并使用theme_generator_x来动态生成主题。以下是一个简单的示例：

  1. 创建主应用文件 main.dart
import 'package:flutter/material.dart';
import 'package:theme_generator_x/theme_generator_x.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用 ThemeGeneratorX 来创建一个主题
    final ThemeData themeData = ThemeGeneratorX(
      // 基础主题颜色
      primaryColor: Colors.blue,
      // 基础主题亮度
      brightness: Brightness.light,
      // 自定义文本主题
      textTheme: TextTheme(
        headline1: TextStyle(fontSize: 32, color: Colors.white),
        bodyText1: TextStyle(fontSize: 16, color: Colors.black),
      ),
      // 其他自定义主题属性...
    ).generateTheme();

    return MaterialApp(
      title: 'Flutter Theme Generator X Demo',
      theme: themeData,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Generator X Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: Theme.of(context).textTheme.headline1,
            ),
            SizedBox(height: 20),
            Text(
              'This is a demo of theme_generator_x.',
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ],
        ),
      ),
    );
  }
}
  1. 运行应用

现在，你可以运行你的Flutter应用，应该会看到一个使用了由ThemeGeneratorX生成的主题的应用界面。

解释

  • ThemeGeneratorX：这是theme_generator_x插件的核心类，用于生成ThemeData对象。
  • primaryColor：设置主题的主颜色。
  • brightness：设置主题的亮度（亮或暗）。
  • textTheme：自定义文本主题，可以详细设置不同级别的文本样式。
  • generateTheme()：这个方法生成并返回一个ThemeData对象，你可以将这个对象应用到你的MaterialApp的theme属性中。

通过这种方式，你可以非常灵活地生成和应用自定义主题，而不需要手动编写大量的ThemeData代码。theme_generator_x插件提供了许多其他配置选项，你可以根据需要进行调整和扩展。

回到顶部