本文核心要點

我們還需要了解 Material Components，也就是 Material 元件。它提供了實現 Material Design 準則的視覺、行為和動作的 Widget。官方將 Material 元件分為為幾個型別：

應用程式結構和導航Button輸入和選擇對話方塊，警告彈框和麵板資訊顯示佈局

主要介紹應用程式結構和導航，會分為兩篇文章進行介紹，這一篇介紹應用程式結構和導航分類中的 MaterialApp、Scaffold、AppBar。

1.MaterialApp

說到 Material 元件，不得不提到 MaterialApp，它包含了許多 Widget，這些 Widget 通常是實現 Material Design 的應用程式所必需的。MaterialApp 在此前的文章都用過，簡單的使用這裡就不介紹了，這裡主要介紹下路由。移動 App 中通常通過全屏元素 “螢幕” 或 “頁面” 來顯示內容。在 Flutter 中，這些元素被稱為 route（路由），它們由 Navigator 管理。Navigator 不僅管理了一堆 route，還提供管理堆疊的方法 Navigator.push 和 Navigator.pop，通過路由物件的進出棧來控制頁面的跳轉。

flutter 路由的使用方式主要有兩種，一種是新建路由，一種是註冊路由。我們分別用這兩種方式寫例子：首屏是第一個介面，通過第一個介面的按鈕跳轉到第二頁，點選第二頁的按鈕回到第一頁。

1.1 新建路由

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material Components', home: FirstPage(), ); }}class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第一頁'), ), body: Padding( padding: EdgeInsets.all(30.0), child: RaisedButton( child: Text('跳轉到第二頁'), onPressed: () { Navigator.push(//1 context, MaterialPageRoute(builder: (context) => SecondPage()), ); }, ), ), ); }}class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第二頁'), ), body: Padding( padding: EdgeInsets.all(30.0), child: RaisedButton( child: Text('回到上一頁'), onPressed: () { Navigator.pop(context);//2 }), ), ); }}

一個簡單的flutter結構

import 'package:flutter/material.dart';void main() { runApp(MaterialApp( // Title title: "Simple Material App", // Home home: Scaffold( // Appbar appBar: AppBar( // Title title: Text("Simple Material App"), ), // Body body: Container( // Center the content child: Center( // Add Text child: Text("Hello World!"), ), ), )));}

總結

這個結構就是一個基本的Flutter專案結構，有部分人問我Flutter專案結構問題。