[Flutter]ElevatedButtonの背景色にグラデーションを設定する方法

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

ElevatedButtonの背景色をグラデーションにするには、どうしたらいいのでしょうか？

方法

グラデーションを設定するためには、まず「ElevatedButton」を「Container」の「child」にします。

            Container(
              width: 300,//横幅
              height: 56,//高さ
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Button'),
              ),
            )

次に、ElevatedButtonの引数「style」に「ElevatedButton.styleFrom」を指定します。

そして、ElevatedButton.styleFromの引数「primary」に、「Colors.transparent」を設定します。

            Container(
              width: 300,
              height: 56,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Button'),
                style: ElevatedButton.styleFrom(primary: Colors.transparent),
              ),
            )

最後に、Containerの引数「decoration」に「BoxDecoration」を指定します。

この「BoxDecoration」の引数「gradient」で、グラデーションを設定します。

            Container(
              width: 300,
              height: 56,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.blue, Colors.green], //青から緑へのグラデーション
                ),
              ),
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Button'),
                style: ElevatedButton.styleFrom(primary: Colors.transparent),
              ),
            )

まとめ

ElevatedButtonの背景色にグラデーションは、次の手順で設定します。

1. ElevatedButtonをContainerの「child」に指定する
2. ElevatedButtonの引数「style」に「ElevatedButton.styleFrom」を指定する
3. ElevatedButton.styleFromの引数「primary」に「Colors.transparent」を設定する
4. Containerの引数「decoration」に「BoxDecoration」を指定する
5. BoxDecorationの引数「gradient」でグラデーションを設定する