flutter-更加优雅的设置路由 routes

flutter 编写路由时，你使用 routes 了么，编写的时候每次 push 的时候是不是一堆代码，使用 routes + name 时，是不是报错时不能更快定位到对应的 Widget，通过下面的方式编写 routes 可以让你的路由编写使用起来更加优雅

//将路由单独放到一个文件夹中，进行如下设置，声明好常量
//常量表现为首字母小写的 widget 名字，避免与类名重叠
//然后写到 routes map里面，以返回给app

const String normalListView = "NormalListView";
const String normalGridView = "NormalGridView";
const String normalSliverView = "NormalSliverView";
const String normalTabBar = "NormalTabBar";

Map<String, WidgetBuilder> getRoutes(BuildContext context) {
  return {
    normalListView: (context) => const NormalListView(),
    normalGridView: (context) => const NormalGridView(),
    normalSliverView: (context) => const NormalSliverView(),
    normalTabBar: (context) => const NormalTabBar()
  };
}

设置路由和跳转

//设置路由
MaterialApp(
  title: 'Flutter List Demo',
  initialRoute: "normalListView", //可以直接设置我们的首页，不需要
  routes: getRoutes(context), 
)

//跳转，这样使用生命的全局变量，可以更加优雅的导航，也避免写错
//并且基本上所有的导航页面也都在一起，也方便查看了(除了首页)
//ps：一些 app 使用的路由中，routes 第一个页面就是首页哈
Navigator.pushNamed(context, normalListView);
Navigator.of(context).pushNamed(normalListView);

优缺点：看着组件控制器名字更加清晰了，写导航是容错率更高了，也方便查看跳转了，将 routes 的使用的更加优雅（也避免了没有 routes 时的一堆代码问题）

另外如论 routes 如何优雅，构造函数的传参始终是一个问题，可以根据需要直接使用 push 方法，可以通过扩展的方式减少啰嗦代码(同时定制转场动画时，也可以在这里面直接扩展调用)

//扩展 NavigatorState，由于不能扩展类方法，可以通过扩展 Navigator.of(context) 返回的 NavigatorState
//Navigator.of(context).pushWidget(const HomePage());
extension ExtendNavigator on NavigatorState {
  Future<T?> pushWidget<T extends Object?>(Widget widget) {
    return push(MaterialPageRoute(builder: (context) => widget));
  }

//如果想设置特殊的push动画也可以，也可以在这里面写
}