Flutter配置生成插件app_config_generator的使用

Flutter配置生成插件app_config_generator的使用

一个用于自动生成 App 配置代码的 Dart 包。通过简单的 YAML 配置文件,自动生成类型安全的 Dart 配置类。

特性

  • 从 YAML 文件自动生成 Dart 配置类
  • 支持类型安全的配置访问
  • 支持 Map 和 Record 两种访问方式
  • 支持配置覆盖文件
  • 支持自动代码生成和热重载

安装

app_config_generator 添加到你的 pubspec.yamldev_dependencies 中:

dev_dependencies:
  app_config_generator: ^1.0.0
  build_runner: ^2.4.0

使用方法

1. 配置 build.yaml

在项目根目录创建或编辑 build.yaml

targets:
  $default:
    sources:
      include:
        - app_config.yaml
        - app_config_overrides.yaml
    builders:
      app_config_generator:app_config:
        options:
          output_file: lib/src/config/app_config.g.dart  # 可选,默认是 lib/config/app_config.g.dart
          use_record_type: false  # 可选,默认false使用Map类型,true使用Record类型
          class_name: AppConfig  # 可选,默认是 AppConfig

2. 创建配置文件

创建 app_config.yaml 文件:

appName: 我的应用
api:
  baseUrl: https://api.example.com
  timeout: 30
database:
  name: app.db
  version: 1

3. 生成配置代码

运行以下命令生成配置代码:

dart run build_runner build

或者在开发时使用 watch 命令:

dart run build_runner watch

4. 使用生成的配置

默认使用 Map 类型(use_record_type: false):

import 'package:your_app/config/app_config.g.dart';

void main() {
  print(AppConfig.appName);  // 字符串
  print(AppConfig.api['baseUrl']);  // 字符串
  print(AppConfig.api['timeout']);  // 整数
}

使用 Record 类型(use_record_type: true):

import 'package:your_app/config/app_config.g.dart';

void main() {
  print(AppConfig.appName);  // 字符串
  print(AppConfig.api.baseUrl);  // 字符串
  print(AppConfig.api.timeout);  // 整数
  
  // 支持解构
  final (baseUrl: url, timeout: t) = AppConfig.api;
  print(url);  // https://api.example.com
}

配置覆盖

你可以创建 app_config_overrides.yaml 来覆盖默认配置,这个文件通常被添加到 .gitignore 中:

api:
  baseUrl: http://localhost:8080

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中配置和使用app_config_generator插件的示例代码和步骤。app_config_generator插件通常用于从配置文件生成Dart代码,从而方便地在Flutter应用中管理和使用配置。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加app_config_generator依赖:

dependencies:
  flutter:
    sdk: flutter
  # 其他依赖...

dev_dependencies:
  build_runner: ^2.1.4  # 确保build_runner版本兼容
  app_config_generator: ^最新版本号  # 替换为最新版本号

2. 创建配置文件

在你的项目根目录下创建一个名为config的文件夹,并在其中创建一个JSON格式的配置文件,例如app_config.json

{
  "api_base_url": "https://api.example.com",
  "feature_flag_new_ui": true,
  "theme_color": "#FF0000"
}

3. 配置build.yaml

在项目的根目录下创建或编辑build.yaml文件,添加以下内容以配置app_config_generator

targets:
  $default:
    builders:
      app_config_generator:app_config_builder:
        options:
          config_path: 'config/app_config.json'
          output_class: 'AppConfig'
          output_file: 'lib/generated/app_config.dart'
  • config_path:指向你的JSON配置文件的路径。
  • output_class:生成的Dart类的名称。
  • output_file:生成的Dart文件的路径。

4. 生成配置代码

在命令行中运行以下命令来生成配置代码:

flutter pub run build_runner build

如果配置正确,build_runner将在lib/generated/目录下生成一个名为app_config.dart的文件,内容类似于:

// GENERATED CODE - DO NOT EDIT BY HAND

part of 'app_config.dart';

// **************************************************************************
// AppConfigGenerator
// **************************************************************************

class AppConfig {
  final String apiBaseUrl;
  final bool featureFlagNewUi;
  final String themeColor;

  const AppConfig({
    required this.apiBaseUrl,
    required this.featureFlagNewUi,
    required this.themeColor,
  });

  // 静态方法,方便全局访问
  static const AppConfig? _$config = AppConfig(
    apiBaseUrl: 'https://api.example.com',
    featureFlagNewUi: true,
    themeColor: '#FF0000',
  );

  static AppConfig get config => _$config!;
}

5. 在代码中使用配置

现在你可以在你的Flutter应用中轻松地使用生成的配置:

import 'package:flutter/material.dart';
import 'generated/app_config.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Color(int.parse(AppConfig.config.themeColor.substring(1), radix: 16)),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo Home Page'),
        ),
        body: Center(
          child: Text('API Base URL: ${AppConfig.config.apiBaseUrl}\nNew UI Feature Flag: ${AppConfig.config.featureFlagNewUi.toString()}'),
        ),
      ),
    );
  }
}

在这个示例中,我们使用了生成的AppConfig类来访问配置信息,例如API基础URL、功能标志和主题颜色。

通过这些步骤,你就可以在Flutter项目中成功配置并使用app_config_generator插件来管理你的应用了。

回到顶部