如何将BottomAppBar backgroundColor透明化

Question

我希望BottomAppBar是透明的并且能显示正在发生的事情，所以这是我的代码。

class BottomTabNavigation extends StatefulWidget {
  @override
  _BottomTabNavigationState createState() => _BottomTabNavigationState();
}

class _BottomTabNavigationState extends State<BottomTabNavigation>
    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            color: Colors.transparent,
          ),
          _buildScaffold(),
        ],
      ),
    );
  }

  Scaffold _buildScaffold() {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: PageView(
        controller: _pageController,
        physics: NeverScrollableScrollPhysics(),
        children: [
          PostsPage(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(
          Icons.add,
          size: 28,
          color: Colors.white,
        ),
        splashColor: Colors.transparent,
        elevation: 0.6,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  Widget _bottomAppBar() {
    return BottomAppBar(
      elevation: 6,
      notchMargin: 8.0,
      color: Colors.white,
      shape: CustomCircularNotchedRectangle(),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 26,
                  icon: Icon(IconFont.icon_home),
                  color: _currentIndex == 0 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                    });
                  },
                ),
                IconButton(
                  iconSize: 26,
                  icon: Icon(IconFont.icon_search2),
                  color: _currentIndex == 1 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                    });
                  },
                ),
              ],
            ),
          ),
          SizedBox(
            width: 56,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 28,
                  icon: Icon(IconFont.icon_message),
                  color: _currentIndex == 2 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                    });
                  },
                ),
                IconButton(
                  iconSize: 28,
                  icon: Icon(IconFont.icon_user1),
                  color: _currentIndex == 3 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 3;
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

结果是黑色的（设置成白色就看不到其余部分）

为了实现透明，我将Scaffold包裹在Stack中并设置了它的背景色，但是还是不行。

你是怎么解决这个问题的？

Answer 1

使用Stack并将PageView与Scaffold body分开：

class _BottomTabNavigationState extends State<DemoWidget>
    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SafeArea(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            child: PageView(
              controller: _pageController,
              physics: NeverScrollableScrollPhysics(),
              children: [
                Container(
                  color: Colors.amber,
                  child: Center(
                    child: Text('Empty Body 1'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: Center(
                    child: Text('Empty Body 2'),
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Center(
                    child: Text('Empty Body 3'),
                  ),
                ),
                Container(
                  color: Colors.amber,
                  child: Center(
                    child: Text('Empty Body 4'),
                  ),
                ),
              ],
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            floatingActionButton: FloatingActionButton(
              onPressed: () {},
              child: Icon(
                Icons.add,
                size: 28,
                color: Colors.white,
              ),
              splashColor: Colors.transparent,
              elevation: 0.6,
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            bottomNavigationBar: _bottomAppBar(),
          ),
        ],
      ),
    );
  }

  Widget _bottomAppBar() {
    return BottomAppBar(
      elevation: 6,
      notchMargin: 8.0,
      color: Colors.white,
      shape: CircularNotchedRectangle(),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 26,
                  icon: Icon(Icons.home),
                  color: _currentIndex == 0 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
                IconButton(
                  iconSize: 26,
                  icon: Icon(Icons.search),
                  color: _currentIndex == 1 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
              ],
            ),
          ),
          SizedBox(
            width: 56,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 28,
                  icon: Icon(Icons.message),
                  color: _currentIndex == 2 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
                IconButton(
                  iconSize: 28,
                  icon: Icon(Icons.supervised_user_circle),
                  color: _currentIndex == 3 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 3;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

记住在 PageView 的每个 child 的末尾使用 Padding 与 BottomAppBar 重叠， BottomPadding.

可以使用 kBottomNavigationBarHeight 尺码

Answer 2

您只需添加

extendBody: true,

属性到 Scaffold

如何将BottomAppBar backgroundColor透明化

How to BottomAppBar backgroundColor transparent

flutter

transparent

bottomappbar