Flutter功能未定义插件fgen的使用

简介

fgen 是一个命令行工具，用于在Flutter项目中自动生成代码。它可以生成新的类（如屏幕、视图模型、存储库和服务），并支持通过自定义模板扩展这些选项。

安装

首先，您需要安装 fgen 插件：

dart pub global activate fgen

确保您的系统环境变量中包含了 pub 的全局路径，以便在任何地方都能运行 fgen 命令。

使用命令

例如，要生成登录相关的文件，可以使用以下命令：

fgen login -svrw

这将生成以下文件：

• -s: LoginScreen 及其导航代码
• -v: LoginViewModel
• -r: LoginRepository
• -w: LoginService 和 LoginWebService

生成的文件之间存在依赖关系：

• 屏幕 (Screen) 依赖于视图模型 (ViewModel)
• 视图模型 (ViewModel) 依赖于存储库 (Repository)
• 存储库 (Repository) 依赖于服务 (Service)

自定义模板

配置

您可以通过在项目根目录下添加 .fgen 文件夹或在 pubspec.yaml 中指定模板文件夹来使用自定义模板：

fgen:
  templates_folder: .fgen

.fgen 文件夹应包含一个 templates.yaml 文件，示例如下：

dialog: # 模板名称和命令
  folder: screen # 生成文件的文件夹
  template_files: # 要生成的文件列表
    - dialog.dart: _dialog # 模板文件及后缀
  abbr: d # 命令缩写
  help: Generate a dialog, if viewmodel is generated, will add ProviderWidget # 帮助文本

您可以使用默认名称或缩写来覆盖默认模板（如 --screen -s, --viewmodel -v, --repository -r, --webservice -w）。

检查模板是否被检测到：

fgen --help

模板文件

模板文件中可以使用以下变量：

• fgen_name：文件名
• fgen_project_name：项目名（来自 pubspec.yaml）
• fgen_if templatesUsedContains(otherTemplate)：如果其他模板也被生成，可以使用此变量来添加额外代码

示例模板文件：

import 'package:flutter/material.dart';
import 'package:flutter_navigation_generator_annotations/flutter_navigation_generator_annotations.dart';
/* fgen_if templatesUsedContains(viewmodel) */
import 'package:fgen_project_name/di/injectable.dart';
import 'package:fgen_project_name/viewmodel/fgen_name/fgen_name_viewmodel.dart';
import 'package:fgen_project_name/widget/provider/provider_widget.dart';
/* fgen_else */
import 'package:fgen_project_name/widget/provider/data_provider_widget.dart';
/* fgen_endif */

@flutterRoute
class FgenNameScreen extends StatefulWidget {
  const FgenNameScreen({super.key});

  @override
  FgenNameScreenState createState() => FgenNameScreenState();
}

class FgenNameScreenState extends State<FgenNameScreen> {
  @override
  Widget build(BuildContext context) {
/* fgen_if templatesUsedContains(viewmodel) */
    return ProviderWidget<FgenNameViewModel>(
      create: () => getIt()..init(),
      childBuilderWithViewModel: (context, viewModel, theme, localization) => Container(),
    );
/* fgen_else */
    return DataProviderWidget(
      childBuilder: (context, theme, localization) => Container(),
    );
/* fgen_endif */
  }
}

默认模板

默认模板与 icapps 模板兼容，详见 flutter-template。

示例Demo

以下是一个简单的Flutter应用示例，演示如何使用 fgen 生成的代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

通过使用 fgen 工具，您可以大大简化Flutter项目的开发流程，提高开发效率。