[Flutter]CupertinoTabScaffoldの背景色を透明にするには？

どうも、ちょげ(@chogetarou)です。

CupertinoTabScaffoldの背景色を透明にする方法を紹介します。

方法

CupertinoTabScaffoldの背景色を透明にするには、引数「backgroundColor」を使います。

具体的には、CupertinoTabScaffoldの引数「backgroundColor」にColors.transparentを指定します。

CupertinoTabScaffold(
  backgroundColor: Colors.transparent,
  child: Body(),
);

CupertinoTabScaffoldの引数「backgroundColor」にColors.transparentを指定することで、CupertinoTabScaffoldの背景色を透明にできます。

使用例

  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Colors.blue,
            Colors.green,
            Colors.red,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: CupertinoTabScaffold(
        backgroundColor: Colors.transparent,
        tabBar: CupertinoTabBar(items: [
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.note)),
          BottomNavigationBarItem(icon: Icon(Icons.settings)),
        ]),
        tabBuilder: (context, index) => Center(),
      ),
    );
  }