[Flutter]グラデーションの枠線をつけるには？

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

グラデーションの枠線をつける方法を紹介します。

方法

グラデーションの枠線をつけるには、２つのContainerを使います。

まず、枠線をつけたいウェジェットを、２つのContainerでラップします。

Container(
  child: Container(
    child: BorderedWidget(),
  ),
),

次に、上層のContainerでグラデーションの設定をします。

また、上層のContainerの引数「alignment」には、Alignment.centerを設定します。

Container(
  alignment: Alignment.center
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.red],
    ),
  ),
  child: Container(
    child: BorderedWidget(),
  ),
),

次に、下層のContainerの引数「color」に背景色を指定します。

Container(
  alignment: Alignment.center
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.red],
    ),
  ),
  child: Container(
    color: backgroundColor,
    child: BorderedWidget(),
  ),
),

最後に、Containerのサイズを設定します。

この時、下層のContainerのサイズを、上層のContainerのサイズよりも少し小さくします。

Container(
  width: width, //横幅
  height: height, //高さ
  alignment: Alignment.center
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.red],
    ),
  ),
  child: Container(
    width: width2, //横幅(widthよりも少し小さくする)
    height: height2, //高さ（heightよりも少し小さくする）
    color: backgroundColor,
    child: BorderedWidget(),
  ),
),

これで２つのContainerの子ウェジェットにグラデーションの枠線がつきます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.red],
            ),
          ),
          width: 200,
          height: 50,
          child: Container(
            alignment: Alignment.center,
            width: 195,
            height: 45,
            color: Colors.white,
            child: Text('Hello, Flutter'),
          ),
        ),
      ),
    );
  }