Flutter 基础学习之 底部不规则Tabbar

每天坚持学习记录分享 加油加油加油！！！！

关键点在于创建不规则按钮，按钮和通用的TabbarItem融合

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,浮层按钮和Tabbar后面融合起来

import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

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

        },
        tooltip: 'oliver',
        child: Icon(
          Icons.add,
          color:Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      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), 
            tooltip: 'home',
            onPressed: (){
              
            }),
             IconButton(icon: Icon(Icons.cake,color:Colors.white),
             tooltip: 'cake',
              onPressed: (){
              
            })
          ],
        ),
      ),
    );
  }
}

效果运行

 

参考资料：

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

https://jspang.com/detailed?id=45#toc212