介面轉換圖

  • 以下是教學影片作者提供的介面轉換圖，首先要有一個Root Widget，再加上Wrapper Widget去偵測目前的登入狀態
  • 假如登入狀態為「已登入」，則畫面就要跳轉至BrewList或Settings Widget
  • 假如登入狀態為「尚未登入」，則畫面就要跳轉至Sign In或Register Widget

在自己開始設計一個App之前，建議可以先畫張介面轉換圖，不僅能更清楚地了解App的整體運作流程，也有助於釐清Flutter Navigation需要push或pop的介面!

資料架構

架構建立

  • 接下來，我們要在brew_crew/lib資料夾中新增資料夾與dart檔，創建的項目如下 :

authenticate.dart

  • 建立一個名為Authenticate的StatefulWidget，而它return的Container中，先放入寫著authenticate的Text Widget 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import 'package:flutter/material.dart';

    class Authenticate extends StatefulWidget {
        @override
        _AuthenticateState createState() => _AuthenticateState();
    }

    class _AuthenticateState extends State<Authenticate> {
        @override
        Widget build(BuildContext context) {
            return Container(
                child: Text('authenticate'),
            );
        }
    }

    因為Authenticate()其中會牽涉到登入狀態之改變，所以將其設為StatefulWidget

home.dart

  • 建立一個名為Home的StatelessWidget，而它return的Container中，先放入寫著Home的Text Widget 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import 'package:flutter/material.dart';

    class Home extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return Container(
            child: Text('Home'),
            );
        }
    }

    因為Home()不會牽涉到任何狀態之變化，所以將其設為StatelessWidget

wrapper.dart

  • 建立一個名為Wrapper的StatelessWidget，目前先將它要return的Widget設為Home Widget 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import 'package:flutter/material.dart';

    //記得，要跳轉到哪個頁面，就要先在前面import它喔!
    import 'package:brew_crew/screens/home/home.dart';

    class Wrapper extends StatelessWidget {
        @override
        Widget build(BuildContext context) {

            //return either Home() or Authenticate()
            return Home();
        }
    }

    Wrapper() return的Widget，將會由登入狀態來決定是要回傳Home Widget或Authenticate Widget

main.dart

  • 將MyApp()預設return的Widget清空，並將return MaterialApp的home Widget設為Wrapper() 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import 'package:brew_crew/screens/wrapper.dart';
    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                home: Wrapper(),
            );
        }
    }

    之後將會MaterialApp中設定頁面的路由關係