[移动开发]Flutter 简单渲染底部导航栏中间按钮

Flutter bottomNavigationBar

先上图，后贴码，这样不香吗？？？

中控页面图

import 'package:app_bottom_navigation_bar/theme/my_theme.dart';
import 'package:app_bottom_navigation_bar/view/pages/home-page.dart';
import 'package:app_bottom_navigation_bar/view/pages/vedio_page.dart';
import 'package:app_bottom_navigation_bar/view/pages/message_page.dart';
import 'package:app_bottom_navigation_bar/view/pages/my_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

///app底部导航栏设置
class AppRootPage extends StatefulWidget {
  const AppRootPage({Key? key}) : super(key: key);

  @override
  _AppRootPageState createState() => _AppRootPageState();
}

class _AppRootPageState extends State<AppRootPage> {
  ///设置tab初始位置值
  int actionTabs = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: getFooter(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: getFloatingButton(),
      body: getMainBody(),
    );
  }

  ///设置底部导航栏各个tab
  Widget getFooter() {
    return Container(
      width: double.infinity,
      height: 90,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
              color: MyTheme.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 20,
              offset: Offset(0, 1)),
        ],
        borderRadius: BorderRadius.circular(20),
        color: MyTheme.white,
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 30, right: 30, top: 20),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                //使用GestureDetector包裹按钮，达到点击响应效果
                GestureDetector(
                  onTap: () {
                    setState(() {
                      actionTabs = 0;
                    });
                  },
                  //主页tab
                  child: Icon(
                    Icons.home,
                    size: 25,
                    color: actionTabs == 0 ? MyTheme.primary : MyTheme.black,
                  ),
                ),
                SizedBox(
                  width: 55,
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      actionTabs = 1;
                    });
                  },
                  //信息页tab
                  child: Icon(
                    Icons.chat_bubble_outline,
                    size: 25,
                    color: actionTabs == 1 ? MyTheme.primary : MyTheme.black,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      actionTabs = 3;
                    });
                  },
                  //视频页tab
                  child: Icon(
                    Icons.play_arrow,
                    size: 25,
                    color: actionTabs == 3 ? MyTheme.primary : MyTheme.black,
                  ),
                ),
                SizedBox(
                  width: 55,
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      actionTabs = 4;
                    });
                  },
                  //我的页面tab
                  child: Icon(
                    Icons.account_circle,
                    size: 28,
                    color: actionTabs == 4 ? MyTheme.primary : MyTheme.black,
                  )
                )
              ]
            )
          ]
        )
      )
    );
  }

  ///底部按钮导航的子页面
  Widget getMainBody() {
    return IndexedStack(
      index: actionTabs,
      children: [
        //首页
        HomePage(),
        //信息页
        Message(),
        //此处可再设置中控页
        Center(
          child: Container(
            width: 90,
            height: 90,
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                  color: Colors.amber,
                  spreadRadius: 2,
                  blurRadius: 15,
                  offset: Offset(0, 1)),
            ], color: Colors.amber, borderRadius: BorderRadius.circular(18)),
            child: Center(
              child: Text("华夏", style: MyTheme.style_mainContent_white),
            ),
          )
        ),
        //视频播放页
        VedioPage(),
        //我的页面
        MyPage()
      ]
    );
  }

  ///设置底部居中大按钮
  Widget getFloatingButton() {
    //使用GestureDetector包裹按钮，达到点击响应效果
    return GestureDetector(
      onTap: () {
        setState(() {
          actionTabs = 2;
        });
      },
      //将中间黑色大按钮形状改变
      child: Transform.rotate(
        angle: -math.pi / 4,
        child: Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(boxShadow: [
            BoxShadow(
                color: MyTheme.grey.withOpacity(0.3),
                spreadRadius: 2,
                blurRadius: 15,
                offset: Offset(0, 1)),
          ], color: MyTheme.black, borderRadius: BorderRadius.circular(23)),
          child: Transform.rotate(
            angle: -math.pi / 4,
            child: Center(
              //图标任你换
                child: Icon(
              Icons.account_box,
              color: MyTheme.white,
              size: 26,
            ))
          )
        )
      )
    );
  }
}

道路望川河，方法千万种，欢迎各位不吝留言赐教，感谢！（其实，更希望大伙们点个赞～～～～～）