手機直播原始碼，突出底部導航欄中間按鈕的樣式

手機直播原始碼，突出底部導航欄中間按鈕的樣式實現的相關程式碼

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,
            ))
          )
        )
      )
    );
  }
}

以上就是 手機直播原始碼，突出底部導航欄中間按鈕的樣式實現的相關程式碼，更多內容歡迎關注之後的文章