Flutter代码生成插件framy_generator的使用

Framy_generator 是一个方便的代码生成工具，用于生成应用样式指南、组件画廊、线框图和故事板等内容。它允许开发者、设计师、测试人员、经理和客户轻松访问 Flutter 应用程序中使用的组件。

官方文档

👉 官方文档

包管理

为了使用 Framy，你需要以下两个包：

1. framy_annotation

包含注解类的包。

2. framy_generator

强大的代码生成器，基于注解自动生成整个应用程序。

Package	Pub
framy_annotation
framy_generator

示例项目

以下是 Framy 的使用示例：

示例代码

import 'package:flutter/material.dart';
import 'package:framy_annotation/framy_annotation.dart';

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

// 添加 [@FramyApp](/user/FramyApp) 注解
[@FramyApp](/user/FramyApp)()
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: getThemeData(), // 使用 [@FramyTheme](/user/FramyTheme) 注解指定主题
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 使用 [@FramyTheme](/user/FramyTheme) 注解定义主题
[@FramyTheme](/user/FramyTheme)()
ThemeData getThemeData() => ThemeData(errorColor: Colors.redAccent);

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState 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: CounterTitle(counter: _counter),
      ),
      floatingActionButton: CounterFAB(onPressed: _incrementCounter),
    );
  }
}

// 使用 [@FramyWidget](/user/FramyWidget) 注解为小部件添加到画廊
[@FramyWidget](/user/FramyWidget)()
class CounterFAB extends StatelessWidget {
  final VoidCallback onPressed;

  const CounterFAB({Key key, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      key: Key('MyCounterFAB'),
      onPressed: onPressed,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    );
  }
}

// 使用 [@FramyWidget](/user/FramyWidget) 注解为另一个小部件添加到画廊
[@FramyWidget](/user/FramyWidget)()
class CounterTitle extends StatelessWidget {
  final String verb;
  final int counter;

  const CounterTitle({Key key, this.verb = 'pushed', this.counter = 0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      key: Key('Counter title'),
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have $verb the button this many times:',
        ),
        Text(
          '$counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ],
    );
  }
}

安装与配置

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  framy_annotation:

dev_dependencies:
  build_runner:
  framy_generator:

2. 添加 @FramyApp 注解

在主应用程序类上添加 [@FramyApp](/user/FramyApp) 注解：

[@FramyApp](/user/FramyApp)()
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(...);
  }
}

3. 运行生成器

运行以下命令以生成 Framy 应用程序：

• 一次性生成：flutter pub run build_runner build
• 实时监听并更新：flutter pub run build_runner watch

4. 运行生成的应用程序

生成器会创建一个新的主文件 (lib/main.app.framy.dart)，运行以下命令以启动 Framy 应用程序：

flutter run lib/main.app.framy.dart

注解说明

1. @FramyTheme

[@FramyTheme](/user/FramyTheme) 用于指定应用程序的主题数据。

示例：通过方法或字段定义主题

[@FramyTheme](/user/FramyTheme)()
ThemeData getThemeData() => ThemeData(primarySwatch: Colors.orange);

示例：通过自定义主题类定义主题

[@FramyTheme](/user/FramyTheme)()
class AppTheme {
  static ThemeData get getTheme => ThemeData(primarySwatch: Colors.orange);
  Color get myAppBlack => Colors.black;
  static const myCompanyColorWhite = Color(0xFFFEFEFE);
}

2. @FramyWidget

[@FramyWidget](/user/FramyWidget) 用于将小部件添加到画廊中。

示例：

[@FramyWidget](/user/FramyWidget)()
class CounterTitle extends StatelessWidget {
  final String verb;
  final int counter;

  const CounterTitle({this.verb = 'pushed', this.counter = 0});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have $verb the button this many times:'),
        Text('$counter', style: Theme.of(context).textTheme.headline4),
      ],
    );
  }
}

3. @FramyModel

[@FramyModel](/user/FramyModel) 用于传递更复杂的参数给小部件。

示例：自定义模型类

[@FramyModel](/user/FramyModel)()
class User {
  final String firstName;
  final String lastName;
  final int age;
  final List<String> emails;

  User(this.firstName, this.lastName, this.age, {this.emails});
}

4. @FramyPreset

[@FramyPreset](/user/FramyPreset) 用于定义依赖项预设，加快测试参数的速度。

示例：

[@FramyPreset](/user/FramyPreset)()
User teenageJohn() => User('John', 'Smith', 13);