[英]Floating Bottom Nav Bar and Floating Action Button in Flutter
I would like to create a UI for some screens with a nav bar and FAB in flutter below: UI design for floating Nav bar And FAB我想在下面的 flutter 中为一些带有导航栏和 FAB 的屏幕创建一个 UI: UI design for floating Nav bar And FAB
here is what I have currently:这是我目前拥有的:
floatingActionButton: InkWell(
onTap: (){
log('Action Button Tapped');
},
child: Stack(
alignment: Alignment(0,-0.2),
children:[
SvgPicture.asset('assets/svg/floating_button.svg'),
SvgPicture.asset('assets/svg/floating_button_icon.svg'),
]),
),
bottomNavigationBar: Container(
color: Colors.transparent,
padding: EdgeInsets.only(bottom: 30,left: 15, right: 15),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(25)),
child: Material(
elevation: 100.0,
child: Container(
height: 55,
color: Colors.black12.withOpacity(0.15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset('assets/svg/colored_home_icon.svg'),
SizedBox(
height: 1.5,
),
Text('Home', style: GoogleFonts.outfit(
color: AppColors.primaryGreen,
fontSize: AppFontSize.s12
),)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset('assets/svg/grey_transfer_icon.svg'),
SizedBox(
height: 1.5,
),
Text('Transactions', style: GoogleFonts.outfit(
color: AppColors.homeDullText,
fontSize: AppFontSize.s12
),)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset('assets/svg/grey_more_icon.svg'),
SizedBox(
height: 1.5,
),
Text('More', style: GoogleFonts.outfit(
color: AppColors.homeDullText,
fontSize: AppFontSize.s12
),)
],
),
],
),
),
),
),
),
and here is the result: result of UI flutter code ,这是结果: UI flutter 代码的结果,
I need help transitioning from what I currently have to the UI requirement... Thanks.我需要帮助从我目前拥有的过渡到 UI 要求......谢谢。
As fast decision you can use floating_navbar lib ( https://pub.dev/packages/floating_navbar , but if you want to made it by yourself, you can try this implementation ( https://codenameakshay.medium.com/flutter-floating-bottom-bar-how-to-4164a9981afb ).作为快速决定,您可以使用 floating_navbar lib ( https://pub.dev/packages/floating_navbar ,但如果您想自己制作它,您可以尝试这个实现 ( https://codenameakshay.medium.com/flutter-floating -bottom-bar-how-to-4164a9981afb )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.