Flutter模块化注解插件flutter_modular_annotations的使用

当然，以下是如何在Flutter项目中使用flutter_modular_annotations插件的一个示例。flutter_modular_annotations插件主要用于简化和模块化Flutter应用的路由管理。下面是一个简单的代码案例来展示如何使用这个插件。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_modular和flutter_modular_annotations的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_modular: ^4.0.0 # 请检查最新版本号
  flutter_modular_annotations: ^4.0.0 # 请检查最新版本号

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

2. 创建模块和注解

接下来，你需要定义一个模块，并使用注解来标记你的路由。

定义模块

创建一个新的Dart文件，比如app_module.dart，来定义你的模块：

import 'package:flutter_modular/flutter_modular.dart';

@Module(
  imports: [
    // 你可以在这里导入其他模块
  ],
)
class AppModule {}

使用注解标记路由

创建一个新的Dart文件，比如routes.dart，来定义你的路由：

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:flutter_modular_annotations/flutter_modular_annotations.dart';

// 定义你的页面
@Injectable()
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(child: Text('Welcome to the Home Page')),
    );
  }
}

@Injectable()
class DetailPage extends StatelessWidget {
  final String message;

  DetailPage({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(child: Text('Detail Message: $message')),
    );
  }
}

// 使用@Adaptive注解来定义路由
@Adaptive
class Routes {
  @ModuleRouteInfo(
    path: '/',
    redirectsTo: '/home',
  )
  static Route<dynamic> homeRoute() {
    return Modular.to.generateRoute('/home');
  }

  @ModuleRouteInfo(path: '/home')
  static Route<dynamic> home() {
    return Modular.to.generateRoute(<String, dynamic>{
      'module': HomePage(),
    });
  }

  @ModuleRouteInfo(path: '/detail/:message')
  static Route<dynamic> detail({required String message}) {
    return Modular.to.generateRoute(<String, dynamic>{
      'module': DetailPage(message: message),
    });
  }
}

3. 配置模块

在你的main.dart文件中，配置你的模块并启动应用：

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

void main() {
  // 配置模块
  Modular.init(module: AppModule());

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Modular Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 使用Modular的Navigator
      navigatorKey: Modular.navigatorKey,
      initialRoute: '/',
      onGenerateRoute: Modular.generateRoute,
    );
  }
}

4. 使用导航

现在，你可以在你的应用中导航到不同的页面。例如，在HomePage中添加一个按钮来导航到DetailPage：

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

@Injectable()
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Welcome to the Home Page'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Modular.to.navigate('/detail/HelloModular');
              },
              child: Text('Go to Detail Page'),
            ),
          ],
        ),
      ),
    );
  }
}

这样，你就完成了一个简单的Flutter模块化应用，使用了flutter_modular_annotations插件来管理路由。这个示例展示了如何定义模块、使用注解标记路由、配置模块以及在应用中进行导航。