Flutter控制器构建插件controller_builder的使用

Flutter控制器构建插件controller_builder的使用

简介

controller_builder 是一个用于简化 TextEditingController 和其他 ChangeNotifier 的初始化与释放的 Flutter 插件。它通过抽象常见的生命周期管理逻辑，帮助开发者更高效地处理控制器的创建与销毁。

特性

• 自动管理生命周期：无需手动调用 dispose，插件会自动处理。
• 灵活扩展：支持自定义的 create 和 dispose 回调。
• 易于集成：与现有代码无缝结合。

使用示例

以下是一个完整的示例，展示如何在 Flutter 中使用 controller_builder。

示例代码

import 'dart:developer';

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ControllerBuilderExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ControllerBuilder<TextEditingController>(
            // 创建一个控制器（或其他 ChangeNotifier）
            create: () {
              final controller = TextEditingController(text: 'Hello, world!');
              return controller..addListener(someListener);
            },

            // 构建函数中可以访问创建的控制器
            builder: (context, controller) {
              return TextField(
                controller: controller,
                onChanged: log,
              );
            },

            // 可选的 dispose 回调，如果需要手动释放资源
            dispose: (controller) {
              controller
                ..removeListener(someListener)
                ..dispose();
            },
          ),
        ),
      ),
    );
  }
}

// 自定义监听器
void someListener() {}

// 自定义日志记录
void log(String value) {
  log('Text changed: $value');
}

代码解析

1. 创建控制器

   create: () {
     final controller = TextEditingController(text: 'Hello, world!');
     return controller..addListener(someListener);
   }
   

   在 create 回调中，我们创建了一个 TextEditingController 并为其添加了一个监听器。

2. 构建 UI

   builder: (context, controller) {
     return TextField(
       controller: controller,
       onChanged: log,
     );
   }
   

   在 builder 回调中，我们可以直接使用创建的控制器来构建 UI。这里使用了 TextField，并绑定了控制器。

3. 释放资源

   dispose: (controller) {
     controller
       ..removeListener(someListener)
       ..dispose();
   }