手机直播源码，突出底部导航栏中间按钮的样式
手机直播源码，突出底部导航栏中间按钮的样式实现的相关代码
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,
))
)
)
)
);
}
}
以上就是 手机直播源码，突出底部导航栏中间按钮的样式实现的相关代码，更多内容欢迎关注之后的文章
