Flutter Containerに背景色をつける方法

Containerに背景色をつけるには？

pic.twitter.com/QmnxSmQf1f

— 高卒プログラマーげんと (@gento34165638) April 25, 2021

動画のように、背景色がテキストの色と被ってる場合は非常に読みにくくなる。。。

// 省略
 final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, Object>;
    final selectedMovie = routeArgs;
    final backdropPath = selectedMovie['backdropPath'];

// 省略

 SliverAppBar(
              expandedHeight: 250,
              flexibleSpace: FlexibleSpaceBar(
                title: Container(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 2),
                  child: Text(
                    selectedMovie['title'],
                  ),
                ),
                background: Image.network(
                  'https://image.tmdb.org/t/p/w780/${backdropPath}',
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),

なのでContainerに背景色をつけたい。
でもContainerはbackgroundColorのプロパティ？を持っていない！

さてどうしようか。。

BoxDecorationを使う

// 省略
 final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, Object>;
    final selectedMovie = routeArgs;
    final backdropPath = selectedMovie['backdropPath'];

// 省略

 SliverAppBar(
              expandedHeight: 250,
              flexibleSpace: FlexibleSpaceBar(
                title: Container(
                  decoration: BoxDecoration(color: Colors.black), // 追加
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 2),
                  child: Text(
                    selectedMovie['title'],
                  ),
                ),
                background: Image.network(
                  'https://image.tmdb.org/t/p/w780/${backdropPath}',
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),

Containerにdecorationを指定してBoxDecorationに色をつけましょう。
それでこんな感じに色がつきます！

 BoxDecoration(color: Colors.black.withOpacity(0.4)),

Opacityをつけて、背景を透明にさせてもいいですね！