Flutter集成Meteor平台插件flutter

Flutter集成Meteor平台插件flutter_meteor的使用

flutter_meteor 是一个多引擎混合栈管理框架，旨在实现原生与Flutter之间的无缝页面导航和状态同步。其核心功能包括：

Navigator 模块
共享缓存
事件总线
共享状态

此插件简化了多引擎环境下的页面导航、通信和状态管理。有关更多信息，请参阅多引擎插件详情。

集成步骤

1. 安装插件

在你的 pubspec.yaml 文件中添加以下配置：

dependencies:
  flutter_meteor: ^1.1.0

2. 初始化插件

在你的Flutter应用程序的默认主函数中初始化插件：

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

final GlobalKey<NavigatorState> rootKey = GlobalKey<NavigatorState>();

void main(List<String> args) async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化导航器
  MeteorNavigator.init(rootKey: rootKey);

  // 注册全局实例
  await MeteorSharedObjectManager.registerGlobalInstances([
    GlobalUserStateManager(),
    GlobalAppStateManager(),
  ]);

  EntryArguments arguments = MeteorEngine.parseEntryArgs(args);
  String? initialRoute = arguments.initialRoute;
  Map<String, dynamic>? routeArguments = arguments.routeArguments;

  runApp(
    MyApp(
      initialRoute: initialRoute,
      routeArguments: routeArguments,
    ),
  );
}

3. 自定义入口函数

如果需要自定义入口函数，可以使用以下代码：

[@pragma](/user/pragma)("vm:entry-point")
void childEntry(List<String> args) async {
  WidgetsFlutterBinding.ensureInitialized();

  await MeteorSharedObjectManager.registerGlobalInstances([
    GlobalUserStateManager(),
    GlobalAppStateManager(),
  ]);

  MeteorNavigator.init(rootKey: rootKey);

  EntryArguments arguments = MeteorEngine.parseEntryArgs(args);
  String? initialRoute = arguments.initialRoute;
  Map<String, dynamic>? routeArguments = arguments.routeArguments;

  runApp(
    MyApp(
      initialRoute: initialRoute,
      routeArguments: routeArguments,
    ),
  );
}

4. 配置 `MaterialApp`

在 MaterialApp 中设置全局的 navigatorKey 并添加 MeteorNavigator.navigatorObserver：

MaterialApp(
  onGenerateRoute: AppRouterCenter.generateRoute,
  navigatorKey: rootKey,
  navigatorObservers: [
    MeteorNavigator.navigatorObserver,
    AppRouterCenter.routeObserver,
  ],
  theme: ThemeData.light(),
  initialRoute: initialRoute ?? 'homePage',
  debugShowCheckedModeBanner: false,
  onGenerateInitialRoutes: (String initialRoute) {
    var route = AppRouterCenter.generateRoute(
      RouteSettings(name: initialRoute, arguments: widget.routeArguments),
    );
    route ??= AppRouterCenter.generateRoute(
      const RouteSettings(name: "homePage", arguments: null),
    );
    return [route!];
  },
)

使用示例

1. 导航器

API 示例

Future<T?> pushNamed<T extends Object?>(String routeName, {
  PageType pageType = PageType.flutter,
  bool isOpaque = true,
  bool animated = true,
  bool present = false,
  Map<String, dynamic>? arguments,
});

使用示例

// 导航到 shareStatePage1 页面
MeteorNavigator.pushNamed("shareStatePage1");

MeteorNavigator.pop();

2. 事件总线

API 示例

static void addListener({
  required String eventName,
  String? listenerId,
  required MeteorEventBusListener listener,
});

使用示例

// 注册事件
MeteorEventBus.addListener(
  eventName: 'eventName',
  listener: (data) {
    if (mounted) {
      setState(() {
        _eventData2 = data;
      });
    }
  },
);

// 发送事件
MeteorEventBus.commit(eventName: 'eventName', data: 'This is a string');

3. 共享缓存

API 示例

static Future<void> setString(String key, String? value);
static Future<String?> getString(String key);

使用示例

// 存储布尔值
SharedMemoryCache.setBool('boolKey', true);

bool? value = await SharedMemoryCache.getBool('boolKey');
print("Retrieved:---> $value");

4. 共享状态

API 示例

class GlobalStateService extends MeteorValueProvider<String> {}

class MeteorSharedObjectProvider<T extends MeteorSharedObject> with ChangeNotifier {
  // 实现细节...
}

使用示例

Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => GlobalStateService()),
      ChangeNotifierProvider(
        create: (_) => MeteorSharedObjectProvider<UserInfo>(model: UserInfo()),
      ),
    ],
    child: MaterialApp(
      onGenerateRoute: AppRouterCenter.generateRoute,
      navigatorKey: rootKey,
      navigatorObservers: [
        MeteorNavigator.navigatorObserver,
        AppRouterCenter.routeObserver,
      ],
      theme: ThemeData.light(),
      initialRoute: initialRoute,
      debugShowCheckedModeBanner: false,
      onGenerateInitialRoutes: (String initialRoute) {
        var route = AppRouterCenter.generateRoute(
          RouteSettings(name: initialRoute, arguments: widget.routeArguments),
        );
        route ??= AppRouterCenter.generateRoute(
          const RouteSettings(name: "homePage", arguments: null),
        );
        return [route!];
      },
    ),
  );
}

示例代码

以下是完整的示例代码，你可以从 GitHub 获取完整的示例文件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_meteor/flutter_meteor.dart';
import 'package:hz_router_plugin_example/router/router_center.dart';
import 'package:hz_router_plugin_example/shared_state/global_singleton_object.dart';
import 'package:hz_router_plugin_example/tracker/event_tracker.dart';
import 'package:provider/provider.dart';

import 'life_cycle_observer.dart';
import 'shared_state/multi_engine_state.dart';

class UserInfo extends MeteorSharedObject {
  UserInfo({
    this.name = 'name',
    this.phone = '18501125114',
    this.gender = 1,
  }) : super(initialFromCache: false);
  String? name = 'name';
  String? phone = '18501125114';
  int? gender = 1;

  [@override](/user/override)
  void setupFromJson(Map<String, dynamic>? json) {
    if (json != null) {
      name = json['name'];
      gender = json['gender'];
      phone = json['phone'];
    }
  }

  [@override](/user/override)
  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'gender': gender,
      'phone': phone,
    };
  }

  UserInfo copy(Map<String, dynamic> json) {
    // TODO: implement copyWithJson
    // Map<String, dynamic> modelJson = super.copyWithJson(json);
    UserInfo userInfo = UserInfo();
    // userInfo.setupFromJson(modelJson);
    return userInfo;
  }
}

final GlobalKey<NavigatorState> rootKey = GlobalKey<NavigatorState>();

void main(List<String> args) async {
  if (kDebugMode) {
    print('这是初始化引擎传递过来的参数：$args');
  }

  WidgetsFlutterBinding.ensureInitialized();

  // 注册共享对象，一些需要跨引擎共享的对象可以在这里注册
  await MeteorSharedObjectManager.registerGlobalInstances([
    GlobalUserStateManager(),
    GlobalAppStateManager(),
  ]);

  WidgetsBinding.instance.addObserver(AppLifecycleObserver());

  // 初始化导航器
  MeteorNavigator.init(rootKey: rootKey);

  // 解析原生传递过来的初始化参数
  EntryArguments arguments = MeteorEngine.parseEntryArgs(args);
  String? initialRoute = arguments.initialRoute;
  Map<String, dynamic>? routeArguments = arguments.routeArguments;
  runApp(
    MyApp(
      initialRoute: initialRoute,
      routeArguments: routeArguments,
    ),
  );
}

[@pragma](/user/pragma)("vm:entry-point")
void childEntry(List<String> args) async {
  if (kDebugMode) {
    print('这是初始化引擎传递过来的参数：$args');
  }

  WidgetsFlutterBinding.ensureInitialized();

  // 注册共享对象，一些需要跨引擎共享的对象可以在这里注册
  await MeteorSharedObjectManager.registerGlobalInstances([
    GlobalUserStateManager(),
    GlobalAppStateManager(),
  ]);

  WidgetsBinding.instance.addObserver(AppLifecycleObserver());

  EventTracker.initialize();

  // 初始化导航器
  MeteorNavigator.init(rootKey: rootKey);

  // 解析原生传递过来的初始化参数
  EntryArguments arguments = MeteorEngine.parseEntryArgs(args);
  String? initialRoute = arguments.initialRoute;
  Map<String, dynamic>? routeArguments = arguments.routeArguments;
  runApp(
    MyApp(
      initialRoute: initialRoute,
      routeArguments: routeArguments,
    ),
  );
}

class MyApp extends StatefulWidget {
  final String? initialRoute;
  final Map<String, dynamic>? routeArguments;
  const MyApp({super.key, this.initialRoute, this.routeArguments});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late String initialRoute;

  [@override](/user/override)
  void initState() {
    super.initState();
    initialRoute = widget.initialRoute ?? 'homePage';
    AppRouterCenter.setup();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GlobalStateService()),
        ChangeNotifierProvider(create: (_) => MeteorStringProvider()),
        ChangeNotifierProvider(create: (_) => MeteorBoolProvider()),
        ChangeNotifierProvider(create: (_) => MeteorIntProvider()),
        ChangeNotifierProvider(create: (_) => MeteorDoubleProvider()),
        ChangeNotifierProvider(create: (_) => MeteorListProvider()),
        ChangeNotifierProvider(create: (_) => MeteorMapProvider()),
        ChangeNotifierProvider(create: (_) => MeteorBytesProvider()),
        ChangeNotifierProvider(
            create: (_) => MeteorSharedObjectProvider<UserInfo>(model: UserInfo())),
      ],
      child: MaterialApp(
        onGenerateRoute: AppRouterCenter.generateRoute,
        navigatorKey: rootKey,
        navigatorObservers: [
          MeteorNavigator.navigatorObserver,
          AppRouterCenter.routeObserver,
          PageRouteObserver(),
        ],
        theme: ThemeData.light(),
        initialRoute: initialRoute,
        debugShowCheckedModeBanner: false,
        onGenerateInitialRoutes: (String initialRoute) {
          if (kDebugMode) {
            print('initialRoute: $initialRoute');
          }
          var route = AppRouterCenter.generateRoute(
            RouteSettings(name: initialRoute, arguments: widget.routeArguments),
          );
          route ??= AppRouterCenter.generateRoute(
            const RouteSettings(name: "homePage", arguments: null),
          );
          return [route!];
        },
      ),
    );
  }
}

更多关于Flutter集成Meteor平台插件flutter_meteor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter集成Meteor平台插件flutter_meteor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter项目中集成Meteor平台插件flutter_meteor时，你可以按照以下步骤进行配置和使用。这个插件允许Flutter应用与Meteor后端进行通信。以下是一个基本的集成和使用示例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_meteor依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_meteor: ^最新版本号  # 替换为实际的最新版本号

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

2. 配置Meteor连接

在你的Flutter应用中，你需要配置Meteor连接参数。这通常在你的应用的主入口文件（例如main.dart）中进行。

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

void main() {
  // 配置Meteor连接
  MeteorClient.configure(
    url: '你的Meteor服务器URL',  // 替换为你的Meteor服务器URL
    useWebSocketForPolling: true, // 根据需要配置
    autoReconnect: true,          // 根据需要配置
    autoReconnectTimer: 5000,     // 根据需要配置
    connectWithRetry: true        // 根据需要配置
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 在这里可以添加连接Meteor后的初始化操作
    MeteorClient.connect().then((value) {
      print('Connected to Meteor');
      // 连接成功后可以进行登录等操作
    }).catchError((error) {
      print('Failed to connect to Meteor: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Meteor Example'),
      ),
      body: Center(
        child: Text('Check the console for Meteor connection status'),
      ),
    );
  }
}

3. 使用MeteorClient进行操作

一旦连接建立，你可以使用MeteorClient进行各种操作，如登录、订阅数据、调用Meteor方法等。

示例：登录

void login(String username, String password) async {
  try {
    var result = await MeteorClient.loginWithPassword({
      'email': username,  // 假设使用email作为用户名
      'password': password
    });
    print('Login result: $result');
  } catch (error) {
    print('Login failed: $error');
  }
}

你可以在initState或其他合适的地方调用login函数。

示例：订阅数据

void subscribeToData() {
  MeteorClient.subscribe('yourPublicationName', [], (error, result) {
    if (error) {
      print('Subscription error: $error');
    } else {
      print('Subscription result: $result');
    }
  });
}

同样，你可以在initState或其他合适的地方调用subscribeToData函数。

示例：调用Meteor方法

void callMeteorMethod() async {
  try {
    var result = await MeteorClient.call('yourMethodName', [arg1, arg2]);
    print('Method call result: $result');
  } catch (error) {
    print('Method call failed: $error');
  }
}

你可以在按钮点击事件或其他用户交互的地方调用callMeteorMethod函数。

总结

以上代码展示了如何在Flutter项目中集成和使用flutter_meteor插件进行基本的Meteor服务器连接、登录、订阅数据和调用Meteor方法。根据你的具体需求，你可以进一步扩展这些功能。务必确保你的Meteor服务器配置正确，并且你的Flutter应用有权访问Meteor服务器。

Flutter集成Meteor平台插件flutter_meteor的使用