Flutter模块化封装插件get_modular_wrappers的使用

Flutter模块化封装插件get_modular_wrappers的使用

使用

修改 main 函数

首先，在项目的 main 函数中，我们需要使用 GetAppWrapper 来初始化应用。

import 'package:get_modular_wrappers/get_modular_wrappers.dart'; 

void main() {
  runApp(
    GetAppWrapper(
      initialRoute: AppRoutes.root,
      unknownPageRoute: AppRoutes.notFound,
      coreModule: CoreModule(),
    ),
  );
}

创建 core_module.dart 文件

接下来，创建一个名为 core_module.dart 的文件，并定义一个继承自 GetModule 的类 CoreModule。在这个类中，我们定义了应用的核心模块和路由。

import 'package:get_modular_wrappers/get_modular_wrappers.dart';
import 'modules/home_module';

class CoreModule extends GetModule {
  @override
  List<GetBind> get binds => [];

  @override
  List<GetRoute> get routes => [
        GetModuleRoute(
          module: HomeModule(),
        ),
        //..更多模块
      ];
}

创建 home_module.dart 文件

然后，创建一个名为 home_module.dart 的文件，用于定义应用的具体模块和页面。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_modular_wrappers/get_modular_wrappers.dart';

import '../app_routes.dart';

class HomeRoutes {
  static const root = '/';
}

class HomeModule extends GetModule {
  @override
  List<GetRoute> get routes => [
    HomeRoute(),
  ];
}

class HomeRoute extends GetRoute {
  HomeRoute();

  @override
  GetPage get asGetPage => GetPage(
    name: AppRoutes.root,
    page: () => const HomePage(),
  );
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

创建 app_routes.dart 文件

最后，创建一个名为 app_routes.dart 的文件，用于映射应用的路由。

import 'modules/home_module.dart';

class AppRoutes {
  static const root = HomeRoutes.root;
  //static const login = LoginPage.routeName;
  static const notFound = '/not-found';
}

更多关于Flutter模块化封装插件get_modular_wrappers的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter模块化封装插件get_modular_wrappers的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


get_modular_wrappers 是一个用于 Flutter 的插件，它可以帮助开发者更好地模块化和封装应用代码。通过使用 get_modular_wrappers，你可以将应用的不同部分（如路由、状态管理、依赖注入等）进行模块化处理，从而提升代码的可维护性和可扩展性。

1. 安装依赖

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

dependencies:
  flutter:
    sdk: flutter
  get_modular_wrappers: ^latest_version

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

2. 创建一个模块

你可以通过继承 Module 类来创建一个模块。模块通常包含路由、依赖注入等配置。

import 'package:get_modular_wrappers/get_modular_wrappers.dart';

class AppModule extends Module {
  [@override](/user/override)
  List<Bind> get binds => [
    Bind((i) => MyService()),
  ];

  [@override](/user/override)
  List<ModularRoute> get routes => [
    ChildRoute('/', child: (context, args) => HomePage()),
    ChildRoute('/details', child: (context, args) => DetailsPage()),
  ];
}

3. 配置主应用

在你的 main.dart 文件中，使用 ModularApp 来包裹你的应用，并指定根模块。

import 'package:flutter/material.dart';
import 'package:get_modular_wrappers/get_modular_wrappers.dart';
import 'app_module.dart';

void main() {
  runApp(ModularApp(
    module: AppModule(),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: Modular.routeInformationParser,
      routerDelegate: Modular.routerDelegate,
    );
  }
}

4. 使用路由导航

你可以使用 Modular.to.navigate 来进行页面导航。

Modular.to.navigate('/details');

5. 依赖注入

你可以在模块中定义依赖注入，然后在任何地方通过 Modular.get 来获取依赖。

class HomePage extends StatelessWidget {
  final MyService service = Modular.get<MyService>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text(service.getMessage()),
      ),
    );
  }
}

6. 模块化设计

你可以将不同的功能划分为不同的模块，然后在主模块中引入这些子模块。

class UserModule extends Module {
  [@override](/user/override)
  List<Bind> get binds => [
    Bind((i) => UserService()),
  ];

  [@override](/user/override)
  List<ModularRoute> get routes => [
    ChildRoute('/profile', child: (context, args) => ProfilePage()),
  ];
}

class AppModule extends Module {
  [@override](/user/override)
  List<Module> get imports => [
    UserModule(),
  ];

  [@override](/user/override)
  List<Bind> get binds => [
    Bind((i) => MyService()),
  ];

  [@override](/user/override)
  List<ModularRoute> get routes => [
    ChildRoute('/', child: (context, args) => HomePage()),
  ];
}
回到顶部