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

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

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

方法

TextButtonの背景にグラデーションを設定するには、まずTextButtonをContainerの子ウェジェットにします。

            Container(
              width: 300, //横幅
              height: 56, //高さ
              child: TextButton(
                onPressed: () {},
                child: Text(
                  'Button',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            )

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

最後に、指定したBoxDecorationの引数「gradient」で、グラデーションの設定をします。

            Container(
              width: 300,
              height: 56,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.blue, Colors.green],
                ),
              ),
              child: TextButton(
                onPressed: () {},
                child: Text(
                  'Button',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            )