Flutterで斜めのグラデーションボーダーを作る方法

背景

ExpansionTile と ListTile を使って展開ができるリストを作っていました。

やりたいと思ったこと

この黒いボーダーをグラデーションかつ斜めのグラデーションにしたい！と思いたち色々試したので書き残します📝

結果

結果としてこのコードに落ち着きました。

color: Colors.white, // 背景色は白で設定されている前提

Container(
  decoration: const BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topLeft, // 左上から
    end: Alignment.bottomRight, // 右下に
    colors: [
      Colors.yellow, // 開始色
      Colors.blue, // 終了色
    ],
  ),
  child: Padding(
    padding: const EdgeInsets.all(2.0), // ここがボーダーの幅になります
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white, // 背景色と同じ色を設定する
      ),
      child: // コンテンツ
    ),
  ),
),

解説

まずはグラデーションを一つ目のコンテナ全体にかける

Container(
  decoration: const BoxDecoration(
  color: Colors.white, // 背景色
  gradient: LinearGradient(
    begin: Alignment.topLeft, // 左上から
    end: Alignment.bottomRight, // 右下に
    colors: [
      Colors.yellow, // 開始色
      Colors.blue, // 終了色
    ],
  ),

その中に背景色と同じ色のコンテナをPadding付きで置く

child: Padding(
  padding: const EdgeInsets.all(2.0), // ここがボーダーの幅になります
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white, // 背景色と同じ色を設定する
    ),
    child: // コンテンツ
  ),
),

2つのコンテナの差分がボーダーっぽく見えるという荒技です、
正攻法で border にグラデーションを付けられるならそうしたかった。。

おまけ

角を丸めたい場合はこう

Container(
  decoration: const BoxDecoration(
  borderRadius: BorderRadius.all(Radius.circular(5)), // ここに設定
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.yellow,
      Colors.blue
    ],
  ),
  child: Padding(
    padding: const EdgeInsets.all(2.0),
    child: Container(
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.primary,
        borderRadius: const BorderRadius.all(Radius.circular(5)), // ここに設定
      ),
      child: Text("斜めのグラデーションコンテナ")
    ),
  ),
),

2つ設定せず片方だけだとボーダーが途切れてしまうので注意しましょう。