Flutter单页路由管理插件singel_page_route的使用

Flutter单页路由管理插件singel_page_route的使用

single_page_route 是一个用于管理所有小部件的单页路由插件。例如，如果你在每个页面都需要调用 AppBar，使用 single_page_route，你可以在主页面 MasterPage 中仅调用一次 AppBar。另一个优点是你不需要重定向页面，即使这些页面之间存在一些相似性。

开始使用

首先，你需要将 single_page_route 添加到你的项目中：

flutter pub add single_page_route

示例代码

以下是一个完整的示例代码，展示了如何使用 single_page_route 插件。

主文件 (main.dart)

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

import 'package:flutter/services.dart';
import 'package:single_page_route/single_page_route.dart';

const HOME = "HOME";
const SEARCH = "SEARCH";

var routes = {
  HOME: const Home(),
  SEARCH: const Search()
};

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MasterRoom(),
    );
  }
}

class MasterRoom extends StatefulWidget {
  const MasterRoom({Key? key}) : super(key: key);

  [@override](/user/override)
  _MasterRoomState createState() => _MasterRoomState();
}

class _MasterRoomState extends State<MasterRoom> {
  late Widget view;
  late StreamSubscription _subscription;

  [@override](/user/override)
  void initState() {
    super.initState();

    SinglePageRoute.initSinglePageRoute(HOME, routes);

    if (!SinglePageRoute.histories.isNotEmpty) {
      SinglePageRoute.pushNamedWithoutTrigger(HOME);
      view = SinglePageRoute.current;
    } else {
      SinglePageRoute.pushNamedWithoutTrigger(SinglePageRoute.currentName);
      view = SinglePageRoute.current;
    }

    _subscription = SinglePageRoute.listen((data) {
      setState(() {
        view = data;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text("EXAMPLE SINGLE ROUTE"),
            leading: SinglePageRoute.histories.length > 1 ? IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () {
                SinglePageRoute.previous();
              },
            ) : null,
          ),
          body: view,
        )
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: FlatButton(
          color: Colors.blue,
          child: const Text(
            "Go To Search",
            style: TextStyle(
                color: Colors.white
            ),
          ),
          onPressed: () {
            SinglePageRoute.pushAndReplaceName(SEARCH);
          },
        ),
      ),
    );
  }
}

class Search extends StatefulWidget {
  const Search({Key? key}) : super(key: key);

  [@override](/user/override)
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
        child: Center(
          child: MaterialButton(
            color: Colors.blue,
            child: const Text(
              "Back to home",
              style: TextStyle(
                  color: Colors.white
              ),
            ),
            onPressed: () {
              SinglePageRoute.pushName(HOME);
            },
          ),
        )
    );
  }
}