Flutter代码生成插件c_scheme_gen的使用

Flutter代码生成插件c_scheme_gen的使用

这是一个生成器包。目前，你可以从一个静态颜色类生成一个颜色方案。

示例

在 colors.dart 文件顶部添加：

part 'colors.g.dart';

并在类上添加注解：

@generateColorScheme
class MyColors {
    static Color get extra => const Color(0xFF003359);
}

这将生成一个扩展到 ColorScheme 的类：

extension MyColorsExtension on ColorScheme {
    Color get extra => MyColors.extra;
}

这样做的原因是，你可以在小部件中通过上下文访问这些颜色，例如：

Theme.of(context).colorScheme.extra

完整示例Demo

步骤 1: 创建颜色类

首先，在你的项目中创建一个文件 lib/colors.dart，并添加以下代码：

import 'package:flutter/material.dart';

// 引入代码生成器
import 'package:c_scheme_gen/c_scheme_gen.dart';

// 颜色类
@generateColorScheme
class MyColors {
  // 定义一个静态颜色属性
  static Color get extra => const Color(0xFF003359);
}

步骤 2: 生成扩展方法

确保你已经安装了 c_scheme_gen 插件，并且已经配置好了代码生成工具（如 build_runner）。

运行代码生成命令：

flutter pub run build_runner build

这将在 colors.dart 文件旁边生成一个 colors.g.dart 文件。

步骤 3: 使用生成的颜色方案

现在你可以在其他 Dart 文件中使用生成的颜色方案。例如，在 main.dart 文件中：

import 'package:flutter/material.dart';
import 'package:your_project_name/colors.dart'; // 替换为实际的路径

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: MyColors.extra,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('C-Scheme Gen Example'),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            color: Theme.of(context).colorScheme.extra,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


c_scheme_gen 是一个用于生成Flutter代码的插件，主要用于生成与URL Scheme相关的代码。它可以帮助开发者快速生成与深度链接和自定义URL Scheme相关的代码，从而简化开发流程。

安装 c_scheme_gen

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

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  c_scheme_gen: ^1.0.0  # 请使用最新版本

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

使用 c_scheme_gen

1. 定义 URL Scheme

在 lib 目录下创建一个新的文件，例如 url_scheme.dart，并在其中定义你的URL Scheme：

import 'package:c_scheme_gen/c_scheme_gen.dart';

@SchemeGen()
abstract class AppUrlScheme {
  @SchemeRoute('/home')
  void home();

  @SchemeRoute('/profile/:userId')
  void profile(String userId);

  @SchemeRoute('/settings')
  void settings();

  @SchemeRoute('/search', queryParams: {'query': 'q'})
  void search(String query);
}

2. 生成代码

在终端中运行以下命令来生成代码：

flutter pub run build_runner build

这将在 lib 目录下生成一个新的文件 url_scheme.g.dart，其中包含与URL Scheme相关的代码。

3. 使用生成的代码

你可以使用生成的代码来处理URL Scheme。例如，在 main.dart 中：

import 'package:flutter/material.dart';
import 'url_scheme.dart';
import 'url_scheme.g.dart';

void main() {
  final urlScheme = AppUrlSchemeImpl();

  runApp(MyApp(urlScheme: urlScheme));
}

class MyApp extends StatelessWidget {
  final AppUrlScheme urlScheme;

  MyApp({required this.urlScheme});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) {
        return urlScheme.onGenerateRoute(settings);
      },
    );
  }
}

4. 处理深度链接

你可以在应用中使用生成的代码来处理深度链接。例如：

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AppUrlSchemeImpl().profile('123');
          },
          child: Text('Go to Profile'),
        ),
      ),
    );
  }
}
回到顶部