Flutter基础功能扩展插件flutter_base_plus的使用

flutter_base_plus 是一个用于快速构建 Flutter 应用的基础功能扩展插件。它提供了多种实用工具和基类，帮助开发者更高效地管理应用的路由、状态、数据模型以及页面结构等。

插件功能概览

以下是 flutter_base_plus 的主要功能模块及其作用：

使用说明

1. 添加依赖

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

dependencies:
  flutter_base_plus: ^1.0.0  # 替换为最新版本号

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

2. 配置应用根组件

通过继承 BaseAppRoot 创建应用根组件，并配置路由、主题和其他选项。

示例代码

import 'package:flutter_base_plus/flutter_base_plus.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';

import 'app_routers.dart';
import 'dialog/custom_loading_widget.dart';
import 'dialog/custom_toast_widget.dart';

void main() {
  // 初始化 Flutter 环境
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends BaseAppRoot {
  late final DateTime startDateTime;

  MyApp({Key? key})
      : super(
          key: key,
          config: AppConfig(
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            routers: AppRouters().routers,
            homeName: "page_1",  // 设置默认首页路由名称
            observers: [
              FlutterSmartDialog.observer,  // 添加路由观察者
              TestNavigatorObserver(),  // 自定义路由观察者
            ],
            transitionBuilder: FlutterSmartDialog.init(
              // 自定义默认 Toast 弹窗
              toastBuilder: (String msg, AlignmentGeometry alignment) {
                return CustomToastWidget(msg: msg, alignment: alignment);
              },
              // 自定义默认加载弹窗
              loadingBuilder: (String msg, Color background) {
                return CustomLoadingWidget(msg: msg, background: background);
              },
            ),
          ),
        ) {
    startDateTime = DateTime.now();
  }

  [@override](/user/override)
  void buildFinishCallBack() {
    debugPrint(
        'MyApp.buildFinishCallBack:${DateTime.now().millisecondsSinceEpoch - startDateTime.millisecondsSinceEpoch} ms');
  }
}

/// 测试用路由观察者
class TestNavigatorObserver extends NavigatorObserver {
  [@override](/user/override)
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {}

  [@override](/user/override)
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {}

  [@override](/user/override)
  void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {}

  [@override](/user/override)
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) async {}
}

3. 定义路由

创建一个文件 app_routers.dart 来定义路由表。

import 'package:flutter_base_plus/flutter_base_plus.dart';

class AppRouters {
  static Map<String, WidgetBuilder> routers = {
    "page_1": (context) => Page1(),
    "page_2": (context) => Page2(),
  };
}

4. 创建页面

创建两个简单的页面 Page1 和 Page2。

Page1

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 1")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, "page_2");
          },
          child: Text("Go to Page 2"),
        ),
      ),
    );
  }
}

Page2

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 2")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("Back to Page 1"),
        ),
      ),
    );
  }
}

5. 自定义弹窗

创建自定义的 CustomToastWidget 和 CustomLoadingWidget。

CustomToastWidget

import 'package:flutter/material.dart';

class CustomToastWidget extends StatelessWidget {
  final String msg;
  final AlignmentGeometry alignment;

  const CustomToastWidget({
    Key? key,
    required this.msg,
    required this.alignment,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.8),
        borderRadius: BorderRadius.circular(8),
      ),
      alignment: alignment,
      child: Text(
        msg,
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

CustomLoadingWidget

import 'package:flutter/material.dart';

class CustomLoadingWidget extends StatelessWidget {
  final String msg;
  final Color background;

  const CustomLoadingWidget({
    Key? key,
    required this.msg,
    required this.background,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: background,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(
          msg,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}