Flutter外观生成插件look_generator的使用

Flutter外观生成插件look_generator的使用

look_generator

这是look包的生成器。

特性

从标记了@Look的widget生成可运行的dart文件，以便只针对你想要预览的widget进行工作。

开始使用

在你的应用依赖项中添加look、look_generator和build_runner：

flutter pub add look
flutter pub add --dev look_generator build_runner

使用方法

更多详细信息请参阅look包。

以下是一个完整的示例演示如何使用look_generator插件。该示例展示了如何创建一个简单的Flutter应用，并使用look_generator生成预览代码。

示例代码

import 'package:flutter/material.dart';

// 定义一个带有 @Look 注解的 widget
class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text('这是一个自定义组件', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

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: [
            const Text(
              '你已经按下了按钮次数:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            // 显示自定义组件
            MyCustomWidget(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，我们创建了一个名为MyCustomWidget的自定义组件，并使用@Look注解对其进行标记。然后在MyHomePage中展示这个组件。

生成预览代码

为了生成预览代码，你需要运行以下命令：

flutter pub run build_runner build

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

1 回复

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


look_generator 是一个用于 Flutter 的代码生成插件，旨在帮助开发者快速生成与外观（主题、颜色、字体等）相关的代码。通过使用 look_generator，开发者可以避免手动编写重复性的代码，从而提高开发效率。

1. 安装 look_generator

首先，你需要在 pubspec.yaml 文件中添加 look_generator 和 build_runner 依赖：

dependencies:
  flutter:
    sdk: flutter
  look: ^latest_version

dev_dependencies:
  build_runner: ^latest_version
  look_generator: ^latest_version

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

2. 创建外观类

接下来，你需要创建一个外观类，并使用 @Look 注解来标记它。这个类将包含你想要生成的外观相关的属性。

import 'package:look/look.dart';

part 'app_look.g.dart';

@Look()
class AppLook {
  final Color primaryColor;
  final Color secondaryColor;
  final TextStyle headingTextStyle;
  final TextStyle bodyTextStyle;

  AppLook({
    required this.primaryColor,
    required this.secondaryColor,
    required this.headingTextStyle,
    required this.bodyTextStyle,
  });
}

3. 生成代码

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

flutter pub run build_runner build

这将生成一个名为 app_look.g.dart 的文件，其中包含 AppLook 类的扩展方法和相关的主题数据。

4. 使用生成的代码

生成的代码将包含一些辅助方法，使你可以更方便地使用外观类。例如：

void main() {
  final appLook = AppLook(
    primaryColor: Colors.blue,
    secondaryColor: Colors.green,
    headingTextStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    bodyTextStyle: TextStyle(fontSize: 16),
  );

  runApp(MyApp(appLook: appLook));
}

class MyApp extends StatelessWidget {
  final AppLook appLook;

  MyApp({required this.appLook});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: appLook.primaryColor,
        colorScheme: ColorScheme.light(
          primary: appLook.primaryColor,
          secondary: appLook.secondaryColor,
        ),
        textTheme: TextTheme(
          headline1: appLook.headingTextStyle,
          bodyText1: appLook.bodyTextStyle,
        ),
      ),
      home: MyHomePage(),
    );
  }
}
回到顶部