Flutter-路由

Flutter路由之fluro

Fluro作为 一个Flutter的 企业级的路由框架 ，确实不错，可以解决多变的需求情况 ，是时候搞一波了

引入fluro

fluro: ^1.5.1

基础配置路由

• routes.dart
  在routes.dart文件中配置路由，这里需要注意的事首页一定要用“/”配置

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'route_handlers.dart';
class Routers {
  static String root = Navigator.defaultRouteName;
  static String curved = "/curved";
  static String tween = "/tween";
  static String loading = "/loading";
  static String fade = "/fade";
  static String hero = "/hero";
  static String hero2 = "/hero2";

  static void configRoutes(){
    final router = Router.appRouter;
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context,Map> params){
       print('dddddddd');
      }
    );
    router.define(root,handler:rootHandler);
    router.define(curved,handler: curvedHandler);
    router.define(tween,handler: tweenHandler);
    router.define(loading,handler: loadingHandler);
    router.define(fade,handler: fadeHandler);
    router.define(hero,handler: heroHandler);
    router.define(hero2,handler: hero2Handler);
  }

  // 导航方法
  static Future navigateTo(BuildContext context, String path,
      {bool replace = false,
      bool clearStack = false,
      TransitionType transition = TransitionType.native,
      Duration transitionDuration = const Duration(milliseconds: 250),
      RouteTransitionsBuilder transitionBuilder}){
        return Router.appRouter.navigateTo(
          context, 
          path,
          replace: replace,
          transition: transition,
          transitionDuration: transitionDuration,
          transitionBuilder: transitionBuilder
          );
      }
}

• route_handlers.dart

import 'dart:convert';

import "package:demoweb/curved_animation.dart";
import 'package:demoweb/animation_page.dart';
import 'package:demoweb/tween_animation.dart';
import 'package:demoweb/loading.dart';
import 'package:demoweb/fade.dart';
import 'package:demoweb/hero_animation.dart';
import 'package:demoweb/hero2_animation.dart';
import 'package:demoweb/animation_page.dart';
import "package:fluro/fluro.dart";
import 'package:flutter/material.dart';

var rootHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  return FlutterAnimationPage(title: "动画",);
});

var curvedHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  var dd = params["name"].first;
  
  // print(Uri.splitQueryString(dd));
  return CurvedAnimationPage(title: dd);
});

var tweenHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  return TweenAnimationWidget(title: "动画",);
});

var loadingHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  return LoadingPage(title: "动画",);
});

var fadeHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  return Fade(title: "动画",);
});

var heroHandler = Handler(handlerFunc: (BuildContext context,Map> params){
  return HeroAnimationPage(title: "动画",);
});

var hero2Handler = Handler(handlerFunc: (BuildContext context,Map> params){
  return Hero2AnimationPage();
});

• main.dart

void main(){
// 注册 fluro routes
  Routers.configRoutes();
  runApp(MyApp());
}

• MyApp.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      /// 生成路由
      onGenerateRoute: Router.appRouter.generator,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

使用场景

    return InkWell(
      child: Container(
        height: 50,
        // color: Colors.red,
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.all(10),
        child: Text(strList[index]),
      ),
      onTap: () {
        Routers.navigateTo(context, "${Routers.curved}?name=${strList[index]}");
      },
    );