[Flutter]Card(カード)の左(left)に枠線(border)をつけるには？

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

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

方法
使用例

方法

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

まず、Cardの内のウェジェットをContainerでラップします。

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

そして、Borderの引数「left」にBorderSideを指定します。

Card(
  child: Container(
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide(),
      ),
    ),
    child: Widget(), //カード内のウェジェット
  ),
),

あとは、BorderSideの引数で枠線の設定をします。

これでCardの左に枠線をつけることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(
                  color: Colors.blue,
                  width: 5,
                ),
              ),
            ),
            child: ListTile(
              title: Text('Flutter'),
            ),
          ),
        ),
      ),
    );
  }