如何在带边框的中心底部导航栏中添加浮动操作按钮？

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),
  ),
);