Flutter未定义功能插件 depend 的使用

depend 是一个用于 Flutter 应用程序中的依赖管理库。它通过 InheritedWidget 提供了一种便捷的方式来初始化和访问服务和仓库。

特性 🚀

• 依赖初始化：在应用程序启动之前准备好所有依赖。
• 全局访问：从 widget 树的任何地方访问依赖。
• 支持父级依赖：轻松创建嵌套或连接的依赖。
• 易于使用：只需少量修改即可将库集成到现有代码中。

安装

步骤 1: 添加依赖

在项目的 pubspec.yaml 文件中添加 depend 库：

dependencies:
  depend: ^latest_version

步骤 2: 安装依赖

运行以下命令来安装依赖：

flutter pub get

使用示例

示例 1: 简单初始化

步骤 1: 定义依赖

创建一个继承自 DependencyContainer 的类并初始化你的依赖：

class RootContainer extends DependencyContainer {
  final ApiService apiService;

  RootContainer({required this.apiService});

  void dispose() {
    apiService.dispose();
  }
}

步骤 2: 定义依赖工厂

创建一个继承自 DependencyFactory<RootContainer> 的类并初始化你的依赖：

class RootDependencyFactory extends DependencyFactory<RootContainer> {
  Future<RootContainer> create() async {
    return RootContainer(
      apiService: await ApiService.initialize(),
    );
  }

  // 或者同步方式
  RootContainer createSync() {
    return RootContainer(
      apiService: ApiService.initializeSync(),
    );
  }
}

步骤 3: 使用 DependencyScope

将你的应用包裹在一个 DependencyScope 中以提供依赖：

void main() {
  runApp(
    DependencyScope<RootContainer, RootDependencyFactory>(
      factory: RootDependencyFactory(), 
      placeholder: const Center(child: CircularProgressIndicator()), 
      builder: (BuildContext context) => const MyApp(),
    ),
  );
}

步骤 4: 在 Widget 中访问依赖

你现在可以使用 DependencyProvider 在 widget 树中的任何地方访问依赖：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiService = DependencyProvider.of<RootContainer>(context).apiService;

    return FutureBuilder(
      future: apiService.getData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }

        return Text('Data: ${snapshot.data}');
      },
    );
  }
}

示例 2: DependencyProvider

final RootContainer dep = await RootDependencyFactory().create();

DependencyProvider<RootContainer>(
  dependency: dep,
  builder: () => YourWidget(),
  // 或者
  child: YourWidget()
)

class YourWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final root = DependencyProvider.of<RootContainer>(context);
    ...
  }
}

示例 3: DependencyScope

DependencyScope<RootContainer, RootDependencyFactory>(
  factory: RootDependencyFactory(),
  builder: (BuildContext context) => Text('Inject'),
  placeholder: Text('Placeholder'),
  errorBuilder: (Object? error) => Text('Error'),
),

完整 Demo 示例

以下是完整的示例，展示了如何使用 depend 库进行依赖注入和管理：

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

// 假设 ApiService 是你自己的服务类
class ApiService {
  static Future<ApiService> initialize() async {
    // 初始化逻辑
    return ApiService();
  }

  Future<String> getData() async {
    // 获取数据逻辑
    return "Sample Data";
  }

  void dispose() {
    // 清理资源
  }
}

class RootContainer extends DependencyContainer {
  final ApiService apiService;

  RootContainer({required this.apiService});

  void dispose() {
    apiService.dispose();
  }
}

class RootDependencyFactory extends DependencyFactory<RootContainer> {
  @override
  Future<RootContainer> create() async {
    return RootContainer(apiService: await ApiService.initialize());
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: DependencyScope<RootContainer, RootDependencyFactory>(
        factory: RootDependencyFactory(),
        placeholder: const Center(child: CircularProgressIndicator()),
        builder: (context) => MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final apiService = DependencyProvider.of<RootContainer>(context).apiService;

    return Scaffold(
      appBar: AppBar(title: Text('Demo')),
      body: FutureBuilder(
        future: apiService.getData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }

          return Text('Data: ${snapshot.data}');
        },
      ),
    );
  }
}

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

以上示例展示了如何使用 depend 插件进行依赖管理和注入。希望这能帮助你更好地理解和使用这个插件！