[Flutter]Containerの上に枠線を表示するには？

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

Containerの上に枠線をつける方法を紹介します。

方法

Containerの上に枠線をつけるには、Borderを使います。

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

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

Container(
  decoration: BoxDecoration(
    border: Border(),
  ),
),

次に、Borderの引数「top」にBorderSideを指定します。

Container(
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(),
    ),
  ),
),

これでContainerの上に枠線がつきます。

以下は、使用例です。

Container(
  width: 130,
  height: 50,
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.blue, //枠線の色
        width: 5, //枠線の太さ
      ),
    ),
  ),
  child: Text(
    'Hello',
    style: TextStyle(fontSize: 50),
  ),
),