[英]Floating Bottom Nav Bar and Floating Action Button in Flutter
我想在下面的 flutter 中为一些带有导航栏和 FAB 的屏幕创建一个 UI: UI design for floating Nav bar And FAB
这是我目前拥有的:
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
),)
],
),
],
),
),
),
),
),
这是结果: UI flutter 代码的结果,
我需要帮助从我目前拥有的过渡到 UI 要求......谢谢。
作为快速决定,您可以使用 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.