我想為一些帶有導航欄和 FAB 的螢屏創建一個 UI： 浮動導航欄和 FAB 的 UI 設計
這是我目前擁有的：
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顫動代碼的結果，
我需要幫助從我目前擁有的 UI 要求過渡......謝謝。
uj5u.com熱心網友回復：
作為快速決定，您可以使用 floating_navbar 庫（https://pub.dev/packages/floating_navbar，但如果您想自己制作，可以嘗試此實作（https://codenameakshay.medium.com/flutter-floating -bottom-bar-how-to-4164a9981afb）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/511681.html
標籤：css扑用户界面颤振布局