Flutter 简单完成咸鱼APP底部tab样式

先来看一下咸鱼APP底部tab栏

咸鱼APP样式.jpg

这次实现功能，主要是修改flutter中的FloatingActionButton的位置和形状
修改发布按钮的位置

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

下面是全部代码

class Tabs extends StatefulWidget {
  int index = 0;
  Tabs({this.index=0});
  @override
  _TabsState createState() => _TabsState(currentIndex: index);
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;
  var currentPage;
  List pages = [HomePage(), CategoryPage(), SearchPage(), ShopPage(), ProfilePage()];
  _TabsState({this.currentIndex=0});
  @override
  void initState() {
    super.initState();
    currentPage = pages[currentIndex];
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: getBottomNavigationBar(currentIndex),
      //设置发布按钮
      floatingActionButton: getFloatingActionButton(),
      //修改发布按钮位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: pages[currentIndex],
    );
  }

  Widget getFloatingActionButton() {
    return Container(
      height: 70,
      width: 70,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(35),
          color: Colors.white
      ),
      child: FloatingActionButton(
        child: Icon(Icons.add, size: 35, color: Colors.black87),
        backgroundColor: Colors.yellow,
        onPressed: () {
          if (currentIndex != 2) {
            setState(() {
              currentIndex = 2;
            });
          }
        },
      ),
    );
}
//tab栏目信息
  Widget getBottomNavigationBar(index) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedFontSize: 14,
      unselectedFontSize: 14,
      selectedItemColor: Colors.yellow,
      selectedIconTheme: IconThemeData(
        color: Colors.yellow
      ),
      currentIndex: currentIndex,
      onTap: (index){
        if (currentIndex != index) {
          setState(() {
            currentIndex = index;
          });
        }
      },
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("首页"),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text("分类")
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.add),
            title: Text("发布")
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("消息")
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("我的")
        )
      ],
    );
  }
}

以上代码完成效果