Flutter插件modifier的介绍与使用

Flutter插件modifier的介绍与使用

Modifier 是一个用于简化 Flutter 中复杂嵌套结构的语法糖工具。它旨在帮助开发者避免在构建复杂的用户界面时陷入过度嵌套的困境。

示例

这里有一个在使用 modifier 插件之前和之后的代码对比。两个示例的源代码都包含在以下仓库的 example 文件夹中，你可以阅读源代码并运行它们以查看结果是否相同。

• Before（115 行）:

import 'package:flutter/widgets.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final media = MediaQueryData.fromView(View.of(context));
    return MediaQuery(
      data: media,
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: MessageHandler(
          message: 'message',
          child: Builder(builder: (context) {
            final message = MessageHandler.of(context);
            return Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 50),
                    child: Text(message),
                  ),
                  GestureDetector(
                    onTap: () {
                      MessageHandler.update(context, (message) => '$message.');
                    },
                    child: const Text('Click me to append a dot'),
                  ),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }
}

class MessageHandler extends StatefulWidget {
  const MessageHandler({
    super.key,
    required this.message,
    required this.child,
  });

  final String message;
  final Widget child;

  static String? maybeOf(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<_InheritedMessage>()?.message;

  static String of(BuildContext context) {
    final message = maybeOf(context);
    assert(message != null, 'cannot find $MessageHandler in context');
    return message!;
  }

  static void update(
      BuildContext context,
      String Function(String raw) updater,
      ) {
    final handler =
    context.dependOnInheritedWidgetOfExactType<_InheritedMessage>();
    if (handler != null) handler.update(updater(handler.message));
  }

  [@override](/user/override)
  State<MessageHandler> createState() => _MessageHandlerState();
}

class _MessageHandlerState extends State<MessageHandler> {
  late String _message = widget.message;

  void update(String message) {
    if (_message != message) {
      setState(() {
        _message = message;
      });
    }
  }

  [@override](/user/override)
  void didUpdateWidget(covariant MessageHandler oldWidget) {
    super.didUpdateWidget(oldWidget);
    update(widget.message);
  }

  [@override](/user/override)
  Widget build(BuildContext context) => _InheritedMessage(
    message: _message,
    update: update,
    child: widget.child,
  );
}

class _InheritedMessage extends InheritedWidget {
  const _InheritedMessage({
    required this.message,
    required this.update,
    required super.child,
  });

  final String message;
  final void Function(String message) update;

  [@override](/user/override)
  bool updateShouldNotify(covariant _InheritedMessage oldWidget) =>
      message != oldWidget.message;
}

• After（22 行）:

import 'package:flutter/widgets.dart';
import 'package:modifier/modifier.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) => builder((context) => [
    context.findAndTrust<String>().asText.padding(bottom: 50),
    'Click me to append a dot'
        .asText
        .on(tap: () => context.update<String>((message) => '$message.'))
  ].asColumn)
      .center
      .handle('message')
      .ensureDirection(context)
      .ensureMedia(context);
}

代码解释

1. Before:

   • 使用传统的 Flutter 构建方法，通过层层嵌套来实现功能。
   • 需要手动处理媒体查询 (MediaQuery) 和文本方向 (Directionality)。
   • 使用 MessageHandler 来管理消息状态，并通过 Builder 和 InheritedWidget 进行状态传递。

2. After:

   • 使用 modifier 插件，大大减少了代码的嵌套层级。
   • 使用链式调用 (chainable method calls) 来设置各种属性，如文本 (Text) 的内边距 (padding)、点击事件 (tap) 等。
   • 通过 builder 方法和 modifier 提供的方法来简化状态管理和布局构建。

完整示例 DEMO

为了更好地理解如何使用 modifier 插件，我们可以通过以下完整的示例代码进行演示：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Modifier Demo')),
        body: Body(),
      ),
    );
  }
}

class Body extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return builder((context) => [
      context.findAndTrust<String>().asText.padding(bottom: 50),
      'Click me to append a dot'
          .asText
          .on(tap: () => context.update<String>((message) => '$message.'))
    ].asColumn)
        .center
        .handle('message')
        .ensureDirection(context)
        .ensureMedia(context);
  }
}