Flutter元件大全(一)

1.Align元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ALign元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Align元件')
        ),
        body: Container(
          width: 200.0,
          height: 300.0,
          /**
           * 指定容器的寬度後, ALign的widthFactor將無效
           * 
          */
          // ==============================================
          color: Colors.red,
          child: Align(
            // 對齊方式
            alignment: Alignment(0, 1.0),
            /**
             * Alignment.center = bottomCenter.topRight 等
             * alignment: Alignment(0, 0),中間是 (0,0) 從-1.0 ~ 1.0
             * */ 
            // =================================================
            widthFactor: 3.0, // 寬度的2倍(根據子元件大小,填充父容器大小) 
            heightFactor: 4.0, // 寬度的2倍(根據子元件大小)
            /**
             * 在父容器寬高不確定的情況下
             * 如果不指定Container 的情況下
             * */ 
            // ==============================================
            child: Container(
              color: Colors.green,
              width: 100.0,
              height: 50.0,
              child: Text(
                'bottomCentent',
                style: TextStyle(
                  color: Colors.white
                  )
              )
            ),
            )
        )
      ),
    );
  }
}
複製程式碼

2.AppBar

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ALign元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Align元件')
        ),
        body: DemoPage()
        
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>{
  @override 
  Widget build(BuildContext context) {
    return SizedBox(
        height: 200.0,
        child: AppBar(
          title: Text('應用'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.print), 
              onPressed: null,
              tooltip: '列印',
            ),
            IconButton(
              icon: Icon(Icons.plus_one), 
              onPressed: null,
              tooltip: '更多',
            ),
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: '分享',
            ),
          ],
        ),
      );
  }
}
複製程式碼

---

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ALign元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('標題'),
          // 左側圖示
          leading: Icon(Icons.home),
          // 整個AppBar的背景
          backgroundColor: Colors.green,
          // 居中標題
          centerTitle: true,
          // 右側圖示
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: '分享',
            ),
            // 選單按鈕
            PopupMenuButton<String>(
              itemBuilder: (BuildContext content) => <PopupMenuItem<String>>[
                // 選單項
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('分享到朋友圈'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('下載到本地'),
                )
              ],
            )
          ],
        ),
        body: DemoPage()
        
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>{
  @override 
  Widget build(BuildContext context) {
    return SizedBox(
        height: 500,
        child: AppBar(
          title: Text('標題'),
          // 左側圖示
          leading: Icon(Icons.home),
          // 整個AppBar的背景
          backgroundColor: Colors.green,
          // 居中標題
          centerTitle: true,
          // 右側圖示
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: '分享',
            ),
            // 選單按鈕
            PopupMenuButton<String>(
              itemBuilder: (BuildContext content) => <PopupMenuItem<String>>[
                // 選單項
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('分享到朋友圈'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('下載到本地'),
                )
              ],
            )
          ],
        ),
      );
  }
}
複製程式碼

3.BottomAppBar元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomAppBar元件',
      home: Scaffold(
        // FAB按鈕位置
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 懸停在底部正中間
        // FAB按鈕
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: null,
        ),
        // 底部應用欄
        bottomNavigationBar: BottomAppBar(
          // floatingActionButton 和 BottomAppBar 之間的距離
          notchMargin: 10.0,
          // 底部應用背景色
          color: Colors.pink,
          child: Row(
            // 設定大小
            mainAxisSize: MainAxisSize.max,
            // 對齊方式
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                onPressed: (){},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: (){},
              )
            ]
          ),
        ),
        body: null
        
      ),
    );
  }
}

複製程式碼

4.ButtonBar元件

@override 
  Widget build(BuildContext context) {
    // 末端按鈕對齊的容器
    return Center(
      child: ButtonBar(
        // 對齊方式 預設為末端對齊
        alignment: MainAxisAlignment.end,
        // child 大小
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          RaisedButton(
            child: Text('首頁'),
            color: Colors.yellowAccent,
            onPressed: null
          ),
          RaisedButton(
            child: Text('釋出'),
            color: Colors.yellow,
            onPressed: null
          ),
          RaisedButton(
            child: Text('我的'),
            color: Colors.yellowAccent,
            onPressed: null
          )
        ]
      ),
    );
  }
複製程式碼

5.FlexibleSpace元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexibleSpace元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlexibleSpace元件')
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverAppBar(
                // 展開高度
                expandedHeight: 150.0,
                // 是否隨滑動隱藏
                floating: false,
                // 是否固定在頂部
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(
                    '可摺疊元件',
                    style: TextStyle(
                      color: Colors.white
                    ),
                    ),
                  background: Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590326522&di=83b46be42e8b62d86b43ecc4d9731e17&src=http://www.bizhidaquan.com/d/file/1/1159829.jpg'),
                )
              )
            ];
          }, 
          body: Center(
            child: Text('向上拉')
          )
        )
      ),
    );
  }
}
複製程式碼

6.SliverAppBar元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SliverAppBar元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SliverAppBar元件')
        ),
        body: Domes()
      ),
    );
  }
}

// 可滾動的元件
class Domes extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxScrolled){
        return <Widget>[
          SliverAppBar(
            // 是否預留高度
            primary: true,
            // 左側圖示
            leading: Icon(Icons.hdr_off),
            // 右側圖示
            actions: <Widget>[
              Icon(Icons.add)
            ],
            // Z軸陰影
            elevation: 10.0,
            // true 固定在頂部  false 完全隱藏
            pinned: false,
            // 可擴充套件區域高度
            expandedHeight: 200.0,
            // 與 floating 結合使用
            snap: false,
            // 是否隨著滑動隱藏標題
            floating: false,
            // 擴充套件區域
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                '這是一個標題',
                style: TextStyle(
                  color: Colors.yellow,
                  fontSize: 16.0
                )
              ),
              background: Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590337388247&di=6637f1e38c9da6fa343735f749080e24&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3004831859%2C2611273449%26fm%3D214%26gp%3D0.jpg'),
            ),
          ) 
        ];
      }, 
      body: Center(
        child: Text('拖動')
      )
      );
  }
}
複製程式碼

7.SnackBar元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar元件')
        ),
        body: Domes()
      ),
    );
  }
}

// 可滾動的元件
class Domes extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap:(){
          final snackBar = SnackBar(
              // 提示資訊
              content: Text('文字提示'),
              // 背景色
              backgroundColor: Colors.green,
              // 操作
              action: SnackBarAction(
                textColor: Colors.white,
                label: '取消', 
                onPressed: (){

                }
              ),
              // 持續時間
              duration: Duration(minutes: 1), // 1分鐘
          );
          Scaffold.of(context).showSnackBar(snackBar);// final snackBar
        },
        child: Text('顯示螢幕底部訊息'),
      )
    );
  }
}
複製程式碼

8.TabBar元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabBar元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TabBar元件')
        ),
        body: DemoPage()
      ),
    );
  }
}

// SingleTickerProviderStateMixin(切換動畫) 必須用在有狀態元件 
class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  TabController _tabController;
  
  // 初始化完成
  @override
  void initState(){
    super.initState();
    _scrollViewController = ScrollController();
    // 長度要和 展示部分一致
    _tabController = TabController(vsync: this, length: 6);
  }

  // 應用銷燬時
  @override
  void dispose(){
    super.initState();
    // 銷燬
    _scrollViewController.dispose();
   
    _tabController.dispose();
    super.dispose();
  }

  @override 
  Widget build(BuildContext context) {
    // 末端按鈕對齊的容器
      return SizedBox(
        height: 500.0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('選項卡'),
            // 前置圖示
            leading: Icon(Icons.home),
            // 背景色
            backgroundColor: Colors.blue,
            // 標題選項卡
            bottom: TabBar(
              controller: _tabController,
              // 是否可以滾動
              isScrollable: true,
              tabs: <Widget>[
                Tab(
                  text: "選項1",
                  icon: Icon(Icons.home),
                ),
                Tab(
                  text: "選項2"
                ),
                Tab(text: "選項3"),
                Tab(text: "選項4"),
                Tab(text: "選項5"),
                Tab(text: "選項6"),
              ]
            ),
          ),
          // 切換內容
          body: TabBarView(controller: _tabController,
            children: <Widget>[
              Text('選項1'),
              Text('選項2'),
              Text('選項3'),
              Text('選項4'),
              Text('選項5'),
              Text('選項6')
            ]
          ),
        ),
    );
  }
}
複製程式碼

9.BottomNavigationBar元件

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNavigationBar元件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomNavigationBar元件')
        ),
        body: Container(
          width: 200.0,
          height: 500.0
        ),
        bottomNavigationBar: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  // 當前Index
  int _currentIndex = 1;
  void _onItemTapped(int index){
    print(index);
    setState(() {
      _currentIndex = index;
    });
  }

  @override 
  Widget build(BuildContext context) {
      return BottomNavigationBar(
        // 底部按鈕型別
        type: BottomNavigationBarType.fixed,  // fixed 固定 
        // 按鈕大小
        iconSize: 24.0,
        onTap: _onItemTapped,
        // 當前索引
        currentIndex: _currentIndex,
        // 選中顏色
        fixedColor: Colors.red,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('聊天'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title: Text('通訊錄'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title: Text('我的'),
            icon: Icon(Icons.home)
          )
        ]
      );
  }
}
複製程式碼