Flutter-新闻客户端-08-路由管理-autoroute

48次阅读

共计 7592 个字符，预计需要花费 19 分钟才能阅读完成。

https://www.bilibili.com/vide…

安装插件
路由定义
自动生成路由控制类
转场动画
登录检查中间件
带参数传递
获取返回值

fluro

前端的使用体验

router.navigateTo(context, “/users/1234”, transition: TransitionType.fadeIn);
flutter_modular

功能强大的路由管理：中间件、懒加载、状态管理、动态路由、分组路由、动画、返回值、命名路由
auto_route

设计精简、低耦合其它功能

功能：中间件、自动生成路由代码、动态路由、动画、返回值、命名路由

官网

https://pub.flutter-io.cn/pac…

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # 路由管理
  auto_route: ^0.4.4

dev_dependencies:
  flutter_test:
    sdk: flutter

  # 路由生成
  auto_route_generator: ^0.4.4
  build_runner:

lib/common/router/router.dart

@MaterialAutoRouter()
class $AppRouter {
  @initial
  IndexPage indexPageRoute;

  WelcomePage welcomePageRoute;

  SignInPage signInPageRoute;

  SignUpPage signUpPageRoute;

  ApplicationPage applicationPageRoute;

  DetailsPage detailsPageRoute;
}

注意 $ 符号

执行命令

flutter packages pub run build_runner build

自动生成 lib/common/router/router.gr.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

// **************************************************************************
// AutoRouteGenerator
// **************************************************************************

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_ducafecat_news/pages/index/index.dart';
import 'package:flutter_ducafecat_news/pages/welcome/welcome.dart';
import 'package:flutter_ducafecat_news/pages/sign_in/sign_in.dart';
import 'package:flutter_ducafecat_news/pages/sign_up/sign_up.dart';
import 'package:flutter_ducafecat_news/pages/application/application.dart';
import 'package:flutter_ducafecat_news/common/router/auth_grard.dart';
import 'package:flutter_ducafecat_news/pages/details/details.dart';

abstract class Routes {
  static const indexPageRoute = '/';
  static const welcomePageRoute = '/welcome-page-route';
  static const signInPageRoute = '/sign-in-page-route';
  static const signUpPageRoute = '/sign-up-page-route';
  static const applicationPageRoute = '/application-page-route';
  static const detailsPageRoute = '/details-page-route';
}

class AppRouter extends RouterBase {
  @override
  Map<String, List<Type>> get guardedRoutes => {Routes.applicationPageRoute: [AuthGuard],
        Routes.detailsPageRoute: [AuthGuard],
      };

  //This will probably be removed in future versions
  //you should call ExtendedNavigator.ofRouter<Router>() directly
  static ExtendedNavigatorState get navigator =>
      ExtendedNavigator.ofRouter<AppRouter>();

  @override
  Route<dynamic> onGenerateRoute(RouteSettings settings) {
    final args = settings.arguments;
    switch (settings.name) {
      case Routes.indexPageRoute:
        if (hasInvalidArgs<IndexPageArguments>(args)) {return misTypedArgsRoute<IndexPageArguments>(args);
        }
        final typedArgs = args as IndexPageArguments ?? IndexPageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => IndexPage(key: typedArgs.key),
          settings: settings,
        );
      case Routes.welcomePageRoute:
        if (hasInvalidArgs<WelcomePageArguments>(args)) {return misTypedArgsRoute<WelcomePageArguments>(args);
        }
        final typedArgs =
            args as WelcomePageArguments ?? WelcomePageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => WelcomePage(key: typedArgs.key),
          settings: settings,
        );
      case Routes.signInPageRoute:
        if (hasInvalidArgs<SignInPageArguments>(args)) {return misTypedArgsRoute<SignInPageArguments>(args);
        }
        final typedArgs = args as SignInPageArguments ?? SignInPageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => SignInPage(key: typedArgs.key),
          settings: settings,
        );
      case Routes.signUpPageRoute:
        if (hasInvalidArgs<SignUpPageArguments>(args)) {return misTypedArgsRoute<SignUpPageArguments>(args);
        }
        final typedArgs = args as SignUpPageArguments ?? SignUpPageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => SignUpPage(key: typedArgs.key),
          settings: settings,
        );
      case Routes.applicationPageRoute:
        if (hasInvalidArgs<ApplicationPageArguments>(args)) {return misTypedArgsRoute<ApplicationPageArguments>(args);
        }
        final typedArgs =
            args as ApplicationPageArguments ?? ApplicationPageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => ApplicationPage(key: typedArgs.key),
          settings: settings,
        );
      case Routes.detailsPageRoute:
        if (hasInvalidArgs<DetailsPageArguments>(args)) {return misTypedArgsRoute<DetailsPageArguments>(args);
        }
        final typedArgs =
            args as DetailsPageArguments ?? DetailsPageArguments();
        return MaterialPageRoute<dynamic>(builder: (_) => DetailsPage(key: typedArgs.key),
          settings: settings,
        );
      default:
        return unknownRoutePage(settings.name);
    }
  }
}

//**************************************************************************
// Arguments holder classes
//***************************************************************************

//IndexPage arguments holder class
class IndexPageArguments {
  final Key key;
  IndexPageArguments({this.key});
}

//WelcomePage arguments holder class
class WelcomePageArguments {
  final Key key;
  WelcomePageArguments({this.key});
}

//SignInPage arguments holder class
class SignInPageArguments {
  final Key key;
  SignInPageArguments({this.key});
}

//SignUpPage arguments holder class
class SignUpPageArguments {
  final Key key;
  SignUpPageArguments({this.key});
}

//ApplicationPage arguments holder class
class ApplicationPageArguments {
  final Key key;
  ApplicationPageArguments({this.key});
}

//DetailsPage arguments holder class
class DetailsPageArguments {
  final Key key;
  DetailsPageArguments({this.key});
}

方式 1：带 context 方式

ExtendedNavigator.of(context).pushNamed(Routes.signUpPageRoute);

方式 2：不带 context 方式

ExtendedNavigator.ofRouter<AppRouter>().pushNamed(Routes.signUpPageRoute);

方式 3：如果你只有一个导航

ExtenedNavigator.rootNavigator.pushNamed(Routes.signUpPageRoute);

lib/common/router/router.dart

Widget zoomInTransition(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
  // you get an animation object and a widget
  // make your own transition
  return ScaleTransition(scale: animation, child: child);
}

@MaterialAutoRouter()
class $AppRouter {
  ...

  @CustomRoute(transitionsBuilder: zoomInTransition)
  ApplicationPage applicationPageRoute;
}

重新生成

flutter packages pub run build_runner build

创建 lib/common/router/auth_grard.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter_ducafecat_news/common/router/router.gr.dart';
import 'package:flutter_ducafecat_news/common/utils/utils.dart';

class AuthGuard extends RouteGuard {
  @override
  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {var isAuth = await isAuthenticated();
    if (isAuth == false) {ExtendedNavigator.rootNavigator.pushNamed(Routes.signInPageRoute);
    }

    return isAuth;
  }
}

注册 lib/main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ducafecat.tech',
      debugShowCheckedModeBanner: false,
      builder: ExtendedNavigator<AppRouter>(
        initialRoute: Routes.indexPageRoute,
        router: AppRouter(),
        guards: [AuthGuard()],
      ),
    );
  }
}

定义 lib/common/router/router.dart

@MaterialAutoRouter()
class $AppRouter {
  ...

  @GuardedBy([AuthGuard])
  @CustomRoute(transitionsBuilder: zoomInTransition)
  ApplicationPage applicationPageRoute;
}

重新生成

flutter packages pub run build_runner build

设定初始参数 lib/pages/details/details.dart

class DetailsPage extends StatefulWidget {
  final String cid;
  DetailsPage({Key key, this.cid}) : super(key: key);

定义 lib/common/router/router.dart

@MaterialAutoRouter(generateNavigationHelperExtension: true)
class $AppRouter {...

重新生成

flutter packages pub run build_runner build

lib/common/router/router.gr.dart

//DetailsPage arguments holder class
class DetailsPageArguments {
  final Key key;
  final String cid;
  DetailsPageArguments({this.key, this.cid});
}

导航参数

ExtendedNavigator.rootNavigator.pushDetailsPageRoute(cid: '123');

获取返回值

    ExtendedNavigator.rootNavigator
        .pushNamed(Routes.signUpPageRoute)
        .then((onValue) {print(onValue);
    });

b 站
油管镜像

https://lanhuapp.com/url/lYuz1
密码: gSKl

蓝湖现在收费了，所以查看标记还请自己上传 xd 设计稿
商业设计稿文件不好直接分享, 可以加微信联系 ducafecat

http://yapi.demo.qunar.com/

https://github.com/ducafecat/…

https://pub.flutter-io.cn/pac…

Flutter、Dart
Flutter Widget Snippets
Awesome Flutter Snippets
Paste JSON as Code
bloc
Code Spell Checker

正文完

前端

发表至：前端

2020-06-24

0

关于前端:我用这些开源项目轻松搭建了一个在线文档平台

关于前端:手势事件采集究竟有多难

关于前端:你前端都只是半桶水而已你还敢问我怎么学后端

关于前端:360°旋转全景照片

shader-动画之旗子水纹波浪-Cocos-Creator

Flutter-新闻客户端-08-路由管理-autoroute

B 站视频

本节目标

正文

一些优秀的路由插件

安装插件

路由定义

自动生成路由控制类

路由跳转

转场动画

登录检查中间件

参数传递

资源

视频

蓝湖设计稿（加微信给授权 ducafecat）

YAPI 接口管理

代码

参考

VSCode 插件

Just My Socks（注册教程内含优惠码）

Flutter-新闻客户端-08-路由管理-autoroute

B 站视频

本节目标

正文

一些优秀的路由插件

安装插件

路由定义

自动生成路由控制类

路由跳转

转场动画

登录检查中间件

参数传递

资源

视频

蓝湖设计稿（加微信给授权 ducafecat）

YAPI 接口管理

代码

参考

VSCode 插件

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）