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

在本篇文档中，我们将详细介绍如何使用 jtech_base 插件来扩展 Flutter 应用的基本功能。jtech_base 提供了一些实用的功能，如本地缓存管理、数据库初始化等。

使用步骤

首先，确保你的项目已经添加了 jtech_base 依赖。在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  jtech_base: ^x.x.x

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

接下来，我们通过一个完整的示例来展示如何使用 jtech_base 插件。

示例代码

以下是 jtech_base 插件的一个完整示例代码，展示了如何初始化本地缓存和数据库，并设置应用的主题和路由。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:jtech_base/jtech_base.dart'; // 导入 jtech_base 插件
import 'common/common.dart';
import 'common/router.dart';
import 'database/database.dart';
import 'provider/config.dart';
import 'provider/theme.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保 Flutter 绑定已初始化
  // 初始化本地缓存
  await localCache.initialize();
  // 初始化数据库
  await database.initialize(Common.databaseName);
  // 启动应用
  runApp(MyApp());
}

class MyApp extends ProviderView {
  MyApp({super.key});

  @override
  List<SingleChildWidget> loadProviders(BuildContext context) => [
        ChangeNotifierProvider<ThemeProvider>(
            create: (context) => ThemeProvider(context)),
        ChangeNotifierProvider<ConfigProvider>(
            create: (context) => ConfigProvider(context)),
      ];

  @override
  Widget buildWidget(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (_, theme, __) {
        return MaterialApp.router(
          title: 'JTech Base Example',
          theme: theme.themeData,
          themeMode: theme.themeMode,
          darkTheme: theme.darkThemeData,
          debugShowCheckedModeBanner: false,
          routerConfig: router.createRouter(),
          localizationsDelegates: const [
            GlobalWidgetsLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
        );
      },
    );
  }
}

// 扩展 context
extension GlobeProviderExtension on BuildContext {
  // 获取主题 provider
  ThemeProvider get theme => Provider.of<ThemeProvider>(this, listen: false);

  // 获取配置 provider
  ConfigProvider get config => Provider.of<ConfigProvider>(this, listen: false);
}

代码解释

1. 导入依赖：

   import 'package:jtech_base/jtech_base.dart';
   

2. 初始化操作：

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     // 初始化本地缓存
     await localCache.initialize();
     // 初始化数据库
     await database.initialize(Common.databaseName);
     // 启动应用
     runApp(MyApp());
   }
   

   这里我们首先确保 Flutter 绑定已初始化，然后初始化本地缓存和数据库。

3. 创建应用：

   class MyApp extends ProviderView {
     MyApp({super.key});
   
     @override
     List<SingleChildWidget> loadProviders(BuildContext context) => [
           ChangeNotifierProvider<ThemeProvider>(
               create: (context) => ThemeProvider(context)),
           ChangeNotifierProvider<ConfigProvider>(
               create: (context) => ConfigProvider(context)),
         ];
   
     @override
     Widget buildWidget(BuildContext context) {
       return Consumer<ThemeProvider>(
         builder: (_, theme, __) {
           return MaterialApp.router(
             title: 'JTech Base Example',
             theme: theme.themeData,
             themeMode: theme.themeMode,
             darkTheme: theme.darkThemeData,
             debugShowCheckedModeBanner: false,
             routerConfig: router.createRouter(),
             localizationsDelegates: const [
               GlobalWidgetsLocalizations.delegate,
               GlobalMaterialLocalizations.delegate,
               GlobalCupertinoLocalizations.delegate,
             ],
           );
         },
       );
     }
   }
   

   在这里，我们定义了一个 MyApp 类，它继承自 ProviderView。我们在 loadProviders 方法中定义了 ThemeProvider 和 ConfigProvider 的实例。在 buildWidget 方法中，我们使用 Consumer 来监听 ThemeProvider 的变化，并根据当前主题数据构建 MaterialApp。

4. 扩展 context：

   extension GlobeProviderExtension on BuildContext {
     // 获取主题 provider
     ThemeProvider get theme => Provider.of<ThemeProvider>(this, listen: false);
   
     // 获取配置 provider
     ConfigProvider get config => Provider.of<ConfigProvider>(this, listen: false);
   }