在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");
  },
),複製程式碼

就這樣！！！！！

這個本人微信歡迎交流