如何在帶邊框的中心底部導航欄中添加浮動操作按鈕？

Question

我正在嘗試在底部導航欄的中間添加一個浮動操作按鈕。 問題是邊框沒有出現，浮動操作按鈕和圖標中的邊距也不符合我的要求。

這是問題的圖片。 實現的圖像

這是我想要的圖片 所需圖片

代碼

bottomNavigationBar: SafeArea(child: _buildBottomBar(context)),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: CircularGradientButton(
      tooltip: 'Increment',
      child: new Image.asset(UIData.cameraIcon),
      gradient: LinearGradient(colors: <Color>[
        Color.fromARGB(255, 17, 153, 142),
        Color.fromARGB(255, 56, 239, 125)
      ]),
      callback: () => openCamera(),
      //_optionsDialogBox(),
      elevation: 2.0,
    ), 



Widget _buildBottomBar(BuildContext context) {
return Material(
  color: Colors.white,
  child: TabBar(
    isScrollable: false,
    unselectedLabelColor: Colors.white.withOpacity(0.3),
    indicatorColor: Colors.white,
    tabs: <Tab>[
      new Tab(
        // set icon to the tab
        icon: Image.asset(
          _tabController.index == 0 ? UIData.mapIconActive : UIData.mapIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 1
              ? UIData.listingIconActive
              : UIData.listingIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 2
              ? UIData.messageIconActive
              : UIData.messageIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 3
              ? UIData.settingsIconActive
              : UIData.settingsIcon,
          width: 30,
          height: 30,
        ),
      ),
    ],
    controller: _tabController,
  ),
);

}

Answer 1

有很多可能的解決方案，其中之一是添加填充和邊框。

import 'package:charts_flutter/flutter.dart' as prefix0;
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueAccent,
        floatingActionButton: Padding(
          padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 70,
            width: 70,
            child: FloatingActionButton(
              backgroundColor: Colors.transparent,
              elevation: 0,
              onPressed: () {},
              child: Container(
                height: 70,
                width: 70,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 4),
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    begin: const Alignment(0.7, -0.5),
                    end: const Alignment(0.6, 0.5),
                    colors: [
                      Color(0xFF53a78c),
                      Color(0xFF70d88b),
                    ],
                  ),
                ),
                child: Icon(Icons.photo_camera, size: 30),
              ),
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          child: Container(
            height: 80,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

Answer 2

這是一個清晰的官方演示： https : //youtu.be/2uaoEDOgk_I

代碼將是這樣的：

Scaffold(..
  floatingActionButton..
  bottomNavigationBar..
    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked

Answer 3

另一種選擇是在您的BottomAppBar使用notchMargin來獲得與您的答案相反的答案。 看起來很棒，所以我決定也添加該選項。

https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a

return Scaffold(
  appBar: AppBar(
    title: Text('Flutter notch demo'),
  ),
  bottomNavigationBar: BottomAppBar(
    notchMargin: 2.0,
    shape: CircularNotchedRectangle(),
  ),
  floatingActionButtonLocation:
  FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(
  onPressed: () => Navigator.of(context).pop(),
  child: Icon(Icons.done_all),
  ),
);