Flutter应用导航管理插件flutter_app_navigator的使用

Flutter应用导航管理插件flutter_app_navigator的使用

flutter_app_navigator 是一个用于管理应用导航、路由和屏幕切换的库。

使用示例

以下是 flutter_app_navigator 的基本使用示例。该示例展示了如何创建一个简单的应用，并使用该库进行页面之间的导航。

import 'package:flutter/material.dart';
import 'package:flutter_app_navigator/app_navigator.dart';

void main() => runApp(const Application());

class Application extends StatelessWidget {
  const Application({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '自定义页面过渡应用',
      initialRoute: "page_1",
      onGenerateRoute: AppRouter.I.generate,
    );
  }
}

class AppRouter extends AppRouteGenerator {
  const AppRouter._();

  static AppRouter get I => const AppRouter._();

  /// 可选配置
  [@override](/user/override)
  AppRouteConfig get config {
    return const AppRouteConfig(
      animationTime: 300,
      animationType: AnimationType.slideRight,
    );
  }

  [@override](/user/override)
  Map<String, RouteBuilder> routes() {
    return {
      "page_1": page1,
      "page_2": page2,
    };
  }

  [@override](/user/override)
  Widget onDefault(BuildContext context, Object? data) => page2(context, data);

  Widget page1(BuildContext context, Object? data) {
    return const Page1();
  }

  Widget page2(BuildContext context, Object? data) {
    return Page2(
      data: data?.get("data"),
    );
  }
}

class Page1 extends StatefulWidget {
  const Page1({
    super.key,
  });

  [@override](/user/override)
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  Object? result;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "数据 : $result",
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () async {
                result = await AppNavigator.load(
                  context,
                  "page_2",
                  // arguments: {
                  //   "data": "Hi, I'm from Home...!",
                  // },
                  animationType: AnimationType.zoom,
                );
                setState(() {});
              },
              child: const Text('前往第二个页面'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  final Object? data;

  const Page2({
    super.key,
    required this.data,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('第二个页面'),
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "$data",
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                AppNavigator.terminate(
                  context,
                  result: "Hey, I'm back...!",
                );
              },
              child: const Text('返回'),
            ),
          ],
        ),
      ),
    );
  }
}