手机直播源码，突出底部导航栏中间按钮的样式

手机直播源码，突出底部导航栏中间按钮的样式实现的相关代码

 

1

import 'package:app_bottom_navigation_bar/theme/my_theme.dart';<br>import 'package:app_bottom_navigation_bar/view/pages/home-page.dart';<br>import 'package:app_bottom_navigation_bar/view/pages/vedio_page.dart';<br>import 'package:app_bottom_navigation_bar/view/pages/message_page.dart';<br>import 'package:app_bottom_navigation_bar/view/pages/my_page.dart';<br>import 'package:flutter/cupertino.dart';<br>import 'package:flutter/material.dart';<br>import 'dart:math' as math;<br>///app底部导航栏设置<br>class AppRootPage extends StatefulWidget {<br>  const AppRootPage({Key? key}) : super(key: key);<br>  @override<br>  _AppRootPageState createState() => _AppRootPageState();<br>}<br>class _AppRootPageState extends State<AppRootPage> {<br>  ///设置tab初始位置值<br>  int actionTabs = 0;<br>  @override<br>  Widget build(BuildContext context) {<br>    return Scaffold(<br>      bottomNavigationBar: getFooter(),<br>      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,<br>      floatingActionButton: getFloatingButton(),<br>      body: getMainBody(),<br>    );<br>  }<br>  ///设置底部导航栏各个tab<br>  Widget getFooter() {<br>    return Container(<br>      width: double.infinity,<br>      height: 90,<br>      decoration: BoxDecoration(<br>        boxShadow: [<br>          BoxShadow(<br>              color: MyTheme.grey.withOpacity(0.1),<br>              spreadRadius: 1,<br>              blurRadius: 20,<br>              offset: Offset(0, 1)),<br>        ],<br>        borderRadius: BorderRadius.circular(20),<br>        color: MyTheme.white,<br>      ),<br>      child: Padding(<br>        padding: const EdgeInsets.only(left: 30, right: 30, top: 20),<br>        child: Row(<br>          crossAxisAlignment: CrossAxisAlignment.start,<br>          mainAxisAlignment: MainAxisAlignment.spaceBetween,<br>          children: [<br>            Row(<br>              children: [<br>                //使用GestureDetector包裹按钮，达到点击响应效果<br>                GestureDetector(<br>                  onTap: () {<br>                    setState(() {<br>                      actionTabs = 0;<br>                    });<br>                  },<br>                  //主页tab<br>                  child: Icon(<br>                    Icons.home,<br>                    size: 25,<br>                    color: actionTabs == 0 ? MyTheme.primary : MyTheme.black,<br>                  ),<br>                ),<br>                SizedBox(<br>                  width: 55,<br>                ),<br>                GestureDetector(<br>                  onTap: () {<br>                    setState(() {<br>                      actionTabs = 1;<br>                    });<br>                  },<br>                  //信息页tab<br>                  child: Icon(<br>                    Icons.chat_bubble_outline,<br>                    size: 25,<br>                    color: actionTabs == 1 ? MyTheme.primary : MyTheme.black,<br>                  ),<br>                ),<br>              ],<br>            ),<br>            Row(<br>              children: [<br>                GestureDetector(<br>                  onTap: () {<br>                    setState(() {<br>                      actionTabs = 3;<br>                    });<br>                  },<br>                  //视频页tab<br>                  child: Icon(<br>                    Icons.play_arrow,<br>                    size: 25,<br>                    color: actionTabs == 3 ? MyTheme.primary : MyTheme.black,<br>                  ),<br>                ),<br>                SizedBox(<br>                  width: 55,<br>                ),<br>                GestureDetector(<br>                  onTap: () {<br>                    setState(() {<br>                      actionTabs = 4;<br>                    });<br>                  },<br>                  //我的页面tab<br>                  child: Icon(<br>                    Icons.account_circle,<br>                    size: 28,<br>                    color: actionTabs == 4 ? MyTheme.primary : MyTheme.black,<br>                  )<br>                )<br>              ]<br>            )<br>          ]<br>        )<br>      )<br>    );<br>  }<br>  ///底部按钮导航的子页面<br>  Widget getMainBody() {<br>    return IndexedStack(<br>      index: actionTabs,<br>      children: [<br>        //首页<br>        HomePage(),<br>        //信息页<br>        Message(),<br>        //此处可再设置中控页<br>        Center(<br>          child: Container(<br>            width: 90,<br>            height: 90,<br>            decoration: BoxDecoration(boxShadow: [<br>              BoxShadow(<br>                  color: Colors.amber,<br>                  spreadRadius: 2,<br>                  blurRadius: 15,<br>                  offset: Offset(0, 1)),<br>            ], color: Colors.amber, borderRadius: BorderRadius.circular(18)),<br>            child: Center(<br>              child: Text("华夏", style: MyTheme.style_mainContent_white),<br>            ),<br>          )<br>        ),<br>        //视频播放页<br>        VedioPage(),<br>        //我的页面<br>        MyPage()<br>      ]<br>    );<br>  }<br>  ///设置底部居中大按钮<br>  Widget getFloatingButton() {<br>    //使用GestureDetector包裹按钮，达到点击响应效果<br>    return GestureDetector(<br>      onTap: () {<br>        setState(() {<br>          actionTabs = 2;<br>        });<br>      },<br>      //将中间黑色大按钮形状改变<br>      child: Transform.rotate(<br>        angle: -math.pi / 4,<br>        child: Container(<br>          width: 60,<br>          height: 60,<br>          decoration: BoxDecoration(boxShadow: [<br>            BoxShadow(<br>                color: MyTheme.grey.withOpacity(0.3),<br>                spreadRadius: 2,<br>                blurRadius: 15,<br>                offset: Offset(0, 1)),<br>          ], color: MyTheme.black, borderRadius: BorderRadius.circular(23)),<br>          child: Transform.rotate(<br>            angle: -math.pi / 4,<br>            child: Center(<br>              //图标任你换<br>                child: Icon(<br>              Icons.account_box,<br>              color: MyTheme.white,<br>              size: 26,<br>            ))<br>          )<br>        )<br>      )<br>    );<br>  }<br>}

​

 

以上就是 手机直播源码，突出底部导航栏中间按钮的样式实现的相关代码，更多内容欢迎关注之后的文章