在Flutter中使用Fluro插件進行路由跳轉

從一個頁面到另外一個頁面的路由，是全部應用程序必不可少的的，當咱們學習Flutter 框架或者任何框架時, 老是會遇到路由跳轉的問題，若是全部的路由跳轉方案向 <a href="xxx"/>  同樣簡單。

可是，當涉及到Flutter 路由跳轉的時候，通過本身學習或者在項目的屢次使用仍是很容易掌握的，發現  Fluro 插件 ，也許Fluro 本身介紹的同樣  

The brightest, hippest, coolest router for Flutter.    Flutter最亮，最時髦，最酷的路由器。

若是你是WEB前端開發，Fluro對路由的處理，會讓你更快的適應這種方式。Flutter 路由學習起來很容易，寫本片博客也是記錄本身的學習，可是也但願幫助到你。

本篇博客最終構建應用

這個簡單的APP，路由使用Fluro來管理。

開始今天的代碼！

首先，讓咱們檢查Flutter 版本，下面是個人版本。  運行命令 flutter doctor 

讓咱們開始建立FLutter App，個人用命令行去建立，也是能夠用任何支持FLutter IDE來建立它！

flutter create fluro_study複製代碼

讓咱們進入項目目錄，而且用IDE中打開它 ，我這裏用的Android studio ，你也能夠用Vs Code。

首先，讓咱們獲取最新版本的Fluro，點擊這個 ，目前的最新版 1.6.0  , 將會使用此版本開始下面的代碼。

如今，打開你的pubspec.yaml 添加Fluro版本

dependencies:
 fluro: "^1.6.0"複製代碼

添加改行後，請運行下面的命令，他會從Pub倉庫下載該插件，大部分IDE，他會自動執行此步驟，可是若是沒有請在運行命令：

flutter packages get複製代碼

讓咱們清除  lib/main.dart 文件中的內容，放入一個簡單組件來顯示咱們對的頁面

import 'package:flutter/material.dart';import 'package:fluro_tutorial/pages/login.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Fluro study',      home: LoginPage(),    );  }}複製代碼

開始真正的表演

我知道，前面不少廢話，可是若是剛剛學習Flutter的人瀏覽了，這會讓他更清晰。

從這裏開始，他會變得簡潔明瞭，沒有那麼多廢話。而且會更多涉及涉及代碼✌️

讓咱們在「 pages 」的目錄下建立兩個文件。

lib/pages/login.dart

import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登錄頁'),
      ),
      body: Center(
        child: Text('請登陸'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.exit_to_app),
        onPressed: () {},
      ),
    );
  }
}複製代碼

lib/pages/home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {  
    final String username;  

    HomePage({this.username});  

    @override  
    Widget build(BuildContext context) {    
        return Scaffold(
          appBar: AppBar(
            title: Text('首頁'),
          ),
          body: Center(
            child: Text('歡迎你, $username!'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.settings_backup_restore),
            onPressed: () {},
          ),
     );
  }
}複製代碼

目前，咱們還沒法進入首頁，由於沒有使用路由，從功能上看，咱們但願從登錄頁面floatingActionButton 轉入首頁。

如今，讓咱們在lib文件夾中建立一個 router.dart 文件

import 'package:fluro_study/pages/home.dart';
import 'package:fluro_study/pages/login.dart';
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
class FluroRouter {
  static Router router = Router();

  static Handler _loginHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          LoginPage());

  static Handler _homeHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          HomePage(username: params['username'][0]));

  static void setupRouter() {
    router.define(
      'login', // 這是路徑
      handler: _loginHandler,
    );
    router.define(
      'home/:username', //命名參數
      handler: _homeHandler,
    );
  }}複製代碼

FluroRouter  類中第一行代碼 從 Fluro 庫中初始化 Router() 的靜態對象

static Router router = Router();複製代碼

接下來，編寫控制器代碼，負責在路由跳轉時加載組件

// 處理登錄頁面
static Handler _loginHandler = Handler(handlerFunc: (BuildContext 
context, Map<String, dynamic> params) => LoginPage());

// 處理首頁頁面
static Handler _homeHandler = Handler(handlerFunc: (BuildContext context, 
Map<String, dynamic> params) => HomePage(username: params['username'][0]));複製代碼

params['username'][0]  路由傳遞參數，把用戶名發送HomePage

如今，讓咱們回到main.dart 文件而且更新MaterialApp，讓其知道咱們正在使用Fluro 插件

import 'package:fluro_study/router.dart';
import 'package:flutter/material.dart';

void main() {
  // 初始化路由
  FluroRouter.setupRouter();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Fluro Study',
        // 初始化頁面爲登錄頁
        initialRoute: 'login',
        // 使用Fluro 提供的 插件
        onGenerateRoute: FluroRouter.router.generator
    );
  }
}複製代碼

如今，你的頁面上已經成功引入Fluro，而且已經初始化爲登錄頁面，下面實現使用Navigator 對象進行頁面跳轉

lib / pages / login.dart

在 FloatingActionButton  按鈕下 新增一個 onPressed 點擊事件的屬性而且使用

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.exit_to_app),
    onPressed: () {
           var username = 'leoyao';
           Navigator.pushReplacementNamed(context, 'home/$username');
      },
),

Navigator.pushReplacementNamed ()  跳轉頁面以後用戶沒法按後端按鈕回到此頁面

在主頁，這很是簡單，咱們不用傳遞任何參數，只須要調用Navigator.pushReplacementNamed（）。

lib / pages / home.dart

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.settings_backup_restore),
  onPressed: () {
    Navigator.pushReplacementNamed(context, "login");
  },
),複製代碼

就這樣！！！！！

這個本人微信歡迎交流