flutter 路由

pub安装

fluro: 1.6.1

fluro的使用

在详细介绍fluro的几个基本功能之前,先看一下本次代码的文件目录

创建router文件夹

application.dart内容:

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

routes.dart内容:

这里主要是定义flutter的路由

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutterdemo/router/router_handler.dart';

class Routers {
  static String root = "/";
  static String home = "/home";
  static String paramPage = "/param";
  static String returnParamsPage = "/returnParam";

  static void configureRoutes(Router router) {
    router.notFoundHandler = Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      print('handler not find');
      return;
    });
    router.define(root, handler: splashHandler);
    router.define(home, handler: homeHandler);
    router.define(paramPage, handler: paramHandler);
    router.define(returnParamsPage, handler: returnParamHandler);
  }
}

router_handler内容:

import 'package:fluro/fluro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterdemo/pages/demo/demo_page.dart';
import 'package:flutterdemo/pages/demo/return_params_page.dart';
import 'package:flutterdemo/pages/home/home_page.dart';
import 'package:flutterdemo/pages/splash/splash_page.dart';

var splashHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return SplashPage();
});

var homeHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return HomePage();
});

var paramHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  print('---------------');
  print(params);
  print('---------------');
  // 注意first是fluro固定的写法,相当于params['name'][0]
  String name = params["name"]?.first;
  String age = params["age"]?.first;
  String sex = params["sex"]?.first;
  String score = params["score"]?.first;

  return DemoPage(
    name: name,
    age: age,
    sex: sex,
    score: score,
  );
});

var returnParamHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return ReturnParamsPage();
});

在navigator_util中定义具体的路由跳转位置:

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutterdemo/router/application.dart';
import 'package:flutterdemo/router/routes.dart';

class NavigatorUtil {
  // replace=true就是把这个页面移除,后退时不会退到这个界面上来
  // home 页面
  static goHomePage(BuildContext context) {
    Application.router.navigateTo(context, Routers.home,
        transition: TransitionType.fadeIn, replace: true);
  }

  // 路由传参页面
  static goParamPage(
      BuildContext context, String name, String age, String score, String sex) {
    Application.router.navigateTo(context,
        Routers.paramPage + "?name=$name&age=$age&score=$score&sex=$sex",
        transition: TransitionType.cupertino);
  }

  /// 带参数的返回
  static void goBackWithParams(BuildContext context, result) {
    Navigator.pop(context, result);
  }

  // 跳转到有参数返回的页面
  static Future goReturnParamsPage(BuildContext context) {
    return Application.router.navigateTo(context, Routers.returnParamsPage,
        transition: TransitionType.cupertino);
  }
}

splash_page的内容:

等待3秒进入home_page

import 'package:flutter/material.dart';
import 'package:flutterdemo/utils/navigator_util.dart';

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    // 等待3s进入home page
    Future.delayed(Duration(seconds: 3)).then((_) {
      NavigatorUtil.goHomePage(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Text('splash page'),
        ),
      ),
    );
  }
}

demo_page.dart 接收来自homepage的参数

import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  final String name;
  final String age;
  final String score;
  final String sex;

  DemoPage({this.name, this.age, this.score, this.sex});

  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('${widget.name}'),
            Text('${widget.age.toString()}'),
            Text('${widget.score.toString()}'),
            Text('${widget.sex}'),
          ],
        ),
      ),
    );
  }
}

从子页面返回数据到主页面

import 'package:flutter/material.dart';
import 'package:flutterdemo/utils/navigator_util.dart';

class ReturnParamsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('我是带着返回值的按钮'),
              onPressed: () {
                NavigatorUtil.goBackWithParams(context, "hhh");
              },
            )
          ],
        ),
      ),
    );
  }
}

main.dart的内容:

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

class MyApp extends StatelessWidget {
  MyApp() {
    final router = Router();
    Routers.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: Application.router.generator,
    );
  }
}