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

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

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

方法
使用例

方法

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

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

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

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

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

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

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

Containerを使うことで枠線をつけることが出来るのですが、角が丸になっていません。

もし、角丸にしたい場合は、ClipRRectを使います。

下記の使用例で、ClipRRectを使っていますので、良かったら参考にしてみてください。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Colors.blue,
                    width: 8,
                  ),
                ),
              ),
              child: ListTile(
                title: Text('Flutter'),
              ),
            ),
          ),
        ),
      ),
    );
  }