Flutter延迟初始化插件devangels_defer_init的使用

Flutter延迟初始化插件devangels_defer_init的使用

devangels_defer_init

DevAngels

由DevAngels团队带来的开源小部件✨

License: MIT

此小部件在后台服务完成之前会推迟UI的初始化。

完整示例代码

以下是一个完整的示例，展示了如何使用devangels_defer_init插件来实现延迟初始化：

import 'dart:math';

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

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

class MyService {
  MyService._();

  static MyService? _instance;

  // 获取单例实例
  static MyService get instance => _instance!;

  // 初始化服务
  static Future<MyService> init() async {
    if (_instance == null) {
      // 模拟长时间的初始化过程
      await Future.delayed(const Duration(seconds: 5));
      _instance = MyService._();
    }
    return _instance!;
  }

  // 随机返回登录状态
  bool isLoggedIn() {
    return Random(DateTime.now().millisecondsSinceEpoch).nextBool();
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('DevAngels Demo'),
      ),
      body: DeferInit(
        create: () async {
          // 初始化服务
          await MyService.init();
          // 根据登录状态返回不同的界面
          if (MyService.instance.isLoggedIn()) {
            return const Center(
              child: Text(
                'Logged In',
              ),
            );
          } else {
            return const Center(
              child: Text(
                'Not Logged In',
              ),
            );
          }
        },
        // 如果初始化过程中没有数据，显示此占位符
        emptyWidget: const Center(
          child: Text(
            'No Data',
          ),
        ),
      ),
    );
  }
}

更多关于Flutter延迟初始化插件devangels_defer_init的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter延迟初始化插件devangels_defer_init的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


devangels_defer_init 是一个 Flutter 插件，用于延迟初始化某些任务，以提高应用的启动性能。通过延迟初始化，可以将一些非关键的任务推迟到应用启动后再执行，从而减少启动时间。

以下是使用 devangels_defer_init 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 devangels_defer_init 依赖：

dependencies:
  flutter:
    sdk: flutter
  devangels_defer_init: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 使用 DeferInit 包装需要延迟初始化的任务

在你的 Flutter 应用中，使用 DeferInit 包装那些你希望延迟初始化的任务。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Defer Init Example',
      home: DeferInit(
        child: HomeScreen(),
        initBuilder: (context) {
          // 在这里执行延迟初始化的任务
          print("延迟初始化的任务正在执行...");
          // 例如，初始化一些资源、加载数据等
          Future.delayed(Duration(seconds: 2), () {
            print("延迟初始化任务完成");
          });
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Defer Init Example'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

3. 运行应用

运行你的 Flutter 应用，你会看到延迟初始化的任务在应用启动后执行，而不是在启动时立即执行。

4. 自定义延迟初始化时机

DeferInit 允许你自定义延迟初始化的时机。你可以通过 initWhen 参数来指定何时执行延迟初始化任务。例如，你可以在用户与界面交互后再执行初始化任务：

DeferInit(
  child: HomeScreen(),
  initBuilder: (context) {
    print("延迟初始化的任务正在执行...");
    Future.delayed(Duration(seconds: 2), () {
      print("延迟初始化任务完成");
    });
  },
  initWhen: (context) {
    // 在这里定义何时执行延迟初始化任务
    return ModalRoute.of(context)?.isCurrent ?? false;
  },
)

在这个例子中，initWhen 会在当前路由成为当前路由时执行延迟初始化任务。

5. 其他配置

DeferInit 还提供了其他一些配置选项，例如 onInit 回调，用于在初始化完成后执行某些操作。

DeferInit(
  child: HomeScreen(),
  initBuilder: (context) {
    print("延迟初始化的任务正在执行...");
    Future.delayed(Duration(seconds: 2), () {
      print("延迟初始化任务完成");
    });
  },
  onInit: () {
    print("延迟初始化任务已完成");
  },
)
回到顶部