20個Flutter實例視頻教程-第03節: 不規則底部工具欄製做-1

第03節: 不規則底部工具欄製做-1

博客地址：

https://jspang.com/post/flutterDemo.html#toc-973

視頻地址：

https://www.bilibili.com/video/av39709290?p=3

 

視頻裏面的評論：動態組件就是能夠setState的組件

 

 

 

flutter create demo02的項目

 

這裏是定義主題的地方：自定義主題使用theme而後裏面使用：primarySwatch，後面主要跟的就是咱們的顏色

 

引入：bottom_appBar_demo.dart

而後咱們去建立這個自定義的組件bottom_appBar_demo.dart

建立咱們的動態組件：stateFulW快捷鍵

 

文件起好名字:BottomAppBarDemo

今天主要學的就是這個：floatingActionButton，字面意思 可交互的浮動的按鈕。在Scaffold裏面已經有它的位置了。因此後面咱們直接吧FloatingActionButton組件引用過來就能夠了。

ToolTip不影響整個頁面的佈局，只有長按的時候纔會顯示。爲何要加tooltip。由於咱們這個FAB組件常常裏面就放一個icon圖標。

child裏面通常都是放ICON組件。這樣這個動態組件咱們就寫完了。

 

查看效果

鼠標長按會出tooltip

 

再加上app底部的工具欄

此次這裏咱們使用BottomAppBar(）底部工具欄。這個底部工具欄有什麼好處呢。它比NavigatorBar要靈活。

 

 

shape的做用由於要和FAB融合 融合的時候要有一個缺口。缺口的設置就在shape裏面設置。

 

查看效果

 

可是如今尚未融合到一塊兒：這裏咱們須要設置這個屬性：floatingActionButtonLocation

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

 

最終效果

 

代碼

import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,//裏面定義了不少的主題,這裏使用亮藍色
      ),
      home:BottomAppBarDemo()
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
  final Widget child;

  BottomAppBarDemo({Key key, this.child}) : super(key: key);

  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){

        },
        tooltip: 'WJW',
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){},
            ),
            IconButton(
              icon: Icon(Icons.alarm_on),
              color: Colors.white,
              onPressed: (){},
            )
          ],
        ),
      ),
    );
  }
}

bottom_appBar_demo.dart