Flutter自定义钩子功能插件mason_hooks_flutter的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter自定义钩子功能插件mason_hooks_flutter的使用

本包包含一组可在Mason CLI生成Flutter项目时使用的预生成（pre-gen）和后生成（post-gen）钩子。

预生成钩子（Pre Gen Hooks）

  • get_app_name: 从pubspec.yaml中获取应用名称并将其添加到HookContext中。

后生成钩子（Post Gen Hooks）

  • add_android_manifest_permissions: 向AndroidManifest.xml添加权限。
  • add_android_compile_options: 向build.gradle添加编译选项。
  • add_android_default_config: 向build.gradle添加默认配置。
  • add_dependencies: 向pubspec.yaml添加依赖项和开发依赖项。
  • add_import_statements: 向特定文件添加导入语句。
  • add_ios_info_plist_keys: 向Info.plist添加键值对。
  • add_main_dart_code: 向main.dart添加代码。
  • add_podfile_code: 向Podfile添加代码。
  • add_podfile_runner_code: 向Podfile的目标运行器部分添加代码。
  • add_web_index_body: 向index.html的body部分添加代码。
  • add_web_index_head: 向index.html的head部分添加代码。
  • set_android_min_sdk_version: 设置AndroidManifest.xml中的minSdkVersion。
  • set_android_compile_sdk_version: 设置AndroidManifest.xml中的compileSdkVersion。
  • set_android_target_sdk_version: 设置AndroidManifest.xml中的targetSdkVersion。
  • format_code: 格式化特定文件中的代码。
  • replace_code_between_tags: 替换特定文件中标签之间的代码。
  • alphabetize_pubspec: 按字母顺序排列pubspec.yaml中的依赖项和开发依赖项。

示例代码

以下是一个完整的示例，展示如何使用mason_hooks_flutter插件来生成一个带有自定义功能的Flutter项目。

步骤 1: 初始化Mason CLI

首先，确保你已经安装了Mason CLI。如果没有安装，可以通过以下命令安装：

dart pub global activate mason

步骤 2: 创建自定义模板

创建一个新的Mason模板目录，并在其中添加必要的文件。

mkdir my_flutter_template
cd my_flutter_template

在模板目录中，创建以下文件结构：

my_flutter_template/
├── brick.yaml
├── pubspec.yaml
└── templates/
    └── project/
        ├── android/
        │   ├── src/
        │   │   └── main/
        │   │       └── java/
        │   │           └── com/
        │   │               └── example/
        │   │                   └── app/
        │   │                       └── MainActivity.java
        ├── ios/
        │   └── Runner/
        │       └── Info.plist
        ├── lib/
        │   └── main.dart
        ├── web/
        │   └── index.html
        └── pubspec.yaml

步骤 3: 配置brick.yaml

在模板根目录下创建brick.yaml文件，定义模板的基本信息。

name: my_flutter_template
description: A custom Flutter template with hooks.
hooks:
  pre_gen:
    - get_app_name
  post_gen:
    - add_dependencies
    - add_import_statements
    - add_main_dart_code
    - alphabetize_pubspec

步骤 4: 配置pubspec.yaml

在模板根目录下创建pubspec.yaml文件，定义项目的依赖项。

name: my_flutter_template
version: 1.0.0
environment:
  sdk: ">=2.18.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  mason: ^1.0.0

步骤 5: 添加自定义代码

templates/project/lib/main.dart

// templates/project/lib/main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '{{ app_name }}',
      home: Scaffold(
        appBar: AppBar(
          title: Text('{{ app_name }}'),
        ),
        body: Center(
          child: Text('Hello, {{ app_name }}!'),
        ),
      ),
    );
  }
}

templates/project/pubspec.yaml

# templates/project/pubspec.yaml
name: {{ app_name }}
version: 1.0.0
environment:
  sdk: ">=2.18.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

templates/project/android/app/src/main/java/com/example/app/MainActivity.java

// templates/project/android/app/src/main/java/com/example/app/MainActivity.java
package com.example.app;

import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {}

templates/project/ios/Runner/Info.plist

<!-- templates/project/ios/Runner/Info.plist -->
<key>CFBundleDisplayName</key>
<string>{{ app_name }}</string>
<key>CFBundleName</key>
<string>{{ app_name }}</string>

templates/project/web/index.html

<!-- templates/project/web/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{ app_name }}</title>
</head>
<body>
  <script src="main.dart.js"></script>
</body>
</html>

步骤 6: 使用模板生成项目

在模板目录中运行以下命令，生成一个带有自定义功能的Flutter项目。

mason make my_flutter_template --app_name MyCustomApp

更多关于Flutter自定义钩子功能插件mason_hooks_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义钩子功能插件mason_hooks_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


mason_hooks_flutter 是一个用于 Flutter 的自定义钩子功能插件，它允许开发者通过钩子（Hooks）来管理状态和生命周期。钩子是 React 中引入的概念，Flutter 通过 flutter_hooks 包也支持类似的功能。mason_hooks_flutter 进一步扩展了这些功能，提供了更多的钩子和工具。

安装

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

dependencies:
  flutter:
    sdk: flutter
  mason_hooks_flutter: ^0.1.0  # 请检查最新版本

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

基本使用

mason_hooks_flutter 提供了一些常用的钩子，比如 useState, useEffect, useContext 等。下面是一个简单的例子，展示如何使用 useState 钩子来管理状态。

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

class CounterApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterApp(),
  ));
}

钩子类型

mason_hooks_flutter 提供了多种钩子，以下是一些常用的钩子：

  1. useState: 用于管理局部状态。
  2. useEffect: 用于处理副作用，比如订阅、定时器等。
  3. useContext: 用于获取 BuildContext。
  4. useMemoized: 用于缓存计算结果。
  5. useReducer: 用于管理复杂的状态逻辑。

自定义钩子

你还可以创建自定义钩子来封装可重用的逻辑。例如，创建一个自定义钩子来管理表单输入：

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

String useFormInput(String initialValue) {
  final controller = useTextEditingController(text: initialValue);
  final value = useState(initialValue);

  useEffect(() {
    void listener() {
      value.value = controller.text;
    }

    controller.addListener(listener);
    return () => controller.removeListener(listener);
  }, [controller]);

  return value.value;
}

class FormApp extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final name = useFormInput('');

    return Scaffold(
      appBar: AppBar(
        title: Text('Form App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: useTextEditingController(text: name),
              decoration: InputDecoration(labelText: 'Name'),
            ),
            SizedBox(height: 20),
            Text('You entered: $name'),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: FormApp(),
  ));
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！