[Flutter]Cardの右に枠線を表示するには?

Flutter

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

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

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

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

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

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

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

Card(
  child: Container(
    decoration: BoxDecoration(
      border: Border(
        right: 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(
                  right: BorderSide(
                    color: Colors.blue,
                    width: 5,
                  ),
                ),
              ),
              child: ListTile(
                title: Text('Flutter'),
              ),
            ),
          ),
        ),
      ),
    );
  }

コメント

タイトルとURLをコピーしました