[Flutter]CupertinoTabScaffoldの背景色をグラデーションにするには？

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

CupertinoTabScaffoldの背景をグラデーションにする方法を紹介します。

方法

CupertinoTabScaffoldの背景色をグラデーションにするには、Containerを使います。

まず、CupertinoTabScaffoldの引数「backgroundColor」に「Colors.transparent」を指定します。

次に、CupertionTabScaffoldをContainerでラップします。

そして、Containerの引数「decoration」にBoxDecoraitonを指定します。

BoxDecorationの引数「gradient」にGradientのクラスを指定します。

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(・・・),
  ),
  child: CupertinoTabScaffold(
    backgroundColor: Colors.transparent,
    tabBar: CupertinoTabBar(items: [・・・]),
    tabBuilder: (context, index) => Center(),
  ),
);

これでCupertinoTabScaffoldの背景色をグラデーションにできます。

使用例

  @override
  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(),
      ),
    );
  }