如何更改停靠在自定義底部應用欄中的 FAB 周圍的顏色？

Question

所以我希望能夠在FAB周圍填充顏色，但我不確定如何。 我完全按照這篇文章，所以有自定義欄。

Answer 1

我認為您可以將其包裝在容器或其他占位符小部件中並設置背景顏色。 不知道這是否確實有效。 讓我知道！ 格雷茨

編輯：剛剛檢查了我的答案，如果你實現這個（示例）代碼：

 bottomNavigationBar: Container( color: Colors.red, 
    child: FABBottomAppBar(
    centerItemText: 'A',
    color: Colors.grey,
    selectedColor: Colors.red,
    notchedShape: CircularNotchedRectangle(),
    onTabSelected: _selectedTab,
    items: [
      FABBottomAppBarItem(iconData: Icons.menu, text: 'This'),
      FABBottomAppBarItem(iconData: Icons.layers, text: 'Is'),
      FABBottomAppBarItem(iconData: Icons.dashboard, text: 'Bottom'),
      FABBottomAppBarItem(iconData: Icons.info, text: 'Bar'),
    ],
  ),
  ),

它創建FAB 的背景顏色

Answer 2

用它作為你的Scaffold

Scaffold(
   floatingActionButton: FloatingActionButton(onPressed: null, child: Icon(Icons.add),),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   backgroundColor: Colors.orange,
   bottomNavigationBar: Container(
     color: Colors.white,
     child: BottomAppBar(
       color: Colors.purple,
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 56, vertical: 12),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
             Icon(Icons.home, color: Colors.white,),
             Icon(Icons.perm_contact_calendar, color: Colors.white,),
           ],
         ),
       ),
       shape: CircularNotchedRectangle(),
     ),
   ),
 );

輸出：

Answer 3

您也可以通過將“extendBody: true”添加到 Scaffold 小部件來移除 CircularNotchedRectangle 的背景。 注意：確保不要用 SafeArea 小部件包裹 Scaffold 的主體，因為這會破壞移除背景的目的。