Material組件之MaterialApp、Scaffold、AppBar學習筆記

一、MaterialApp

flutter的路由方式有兩種：新建路由和註冊路由

1.1 新建路由

Navigator.push負責將新建的路由添加到Navigator管理的route堆棧的棧頂，Navigator.pop用於彈出route堆棧最頂層的Route。其中頁面進入動畫是向上滑動並淡出，退出動畫是向下滑動並淡出。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('這是第一頁'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('跳到第二頁'),
              onPressed: (){
                //將新建的路由添加到Navigator管理的route堆棧的棧頂
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context)=>SecondPage()),
                );
              },
          ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('這是第二頁'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('回到第一頁'),
              onPressed: (){
                //彈出route堆棧最頂層的Route
                Navigator.pop(context);
              }
          ),
      ),
    );
  }

}

1.2 註冊路由

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: FirstPage(),
      //初始化一個路由列表。當推送路由時，在routes中查找路徑名稱。如果
      //名稱存在，則關聯的WidgetBuilder用於構造MaterialPageRoute
      routes: <String,WidgetBuilder>{
        '/first':(BuildContext context)=>FirstPage(),
        '/second':(BuildContext context)=>SecondPage(),
      },
      initialRoute: '/first',
    );
  }
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('這是第一頁'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('跳到第二頁'),
              onPressed: (){
                //將路由添加到Navigator管理的route堆棧的棧頂，參數爲路由名稱
                Navigator.pushNamed(context, '/second');
              },
          ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('這是第二頁'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('回到第一頁'),
              onPressed: (){
                Navigator.of(context).pop();
              }
          ),
      ),
    );
  }

}

二、 Scaffold

實現了Material Design的基本佈局結構，因此它經常會作爲MaterialApp的子Widget, Scaffold會自動填充可用的空間，這通常意味着它將佔據整個窗口或屏幕，並且Scaffold會自動適配屏幕。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

        //scaffold
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold'),
        ),
        body: Padding(padding: EdgeInsets.all(30.0),child: Text('Scaffold')),
        bottomNavigationBar: BottomAppBar(child: Container(height: 50)),
        drawer: Drawer(child: Center(child: Text('抽屜'),),),
        floatingActionButton: FloatingActionButton(child: Icon(Icons.add),),
      ),
    );
  }
}

用到的屬性：

• appBar：用於設置頂部的標題欄。
• body：顯示Scaffold的主要內容。
• bottomNavigationBar：用於設置Scaffold的底部導航欄，
• drawer：用於設置抽屜效果。
• floatingActionButton：用於設置位於右下角的按鈕。
  

三、AppBar

AppBar由toolbar和其他的可選Widget組成

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

        home: MyScaffld(),
    );
  }
}
class MyScaffld extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar例子'),
        leading: FlutterLogo(colors: Colors.lightGreen,),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: (){
              print('添加按鈕');
            },
          )
        ],
      ),
    );
  }

}