Flutter 中的浮動底部導航欄和浮動操作按鈕

Question

我想在下面的 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 要求......謝謝。

Answer 1

作為快速決定，您可以使用 floating_navbar lib ( https://pub.dev/packages/floating_navbar ，但如果您想自己制作它，您可以嘗試這個實現 ( https://codenameakshay.medium.com/flutter-floating -bottom-bar-how-to-4164a9981afb ）。