【Flutter】Containerに枠線（Border）をつけるには？

2023年11月26日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

FlutterのContainerに枠線をつけるには、BoxDecorationを使用してborderプロパティを設定します。

四辺に枠線をつける

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.black, // 枠線の色
      width: 2.0, // 枠線の幅
    ),
  ),
);

この例ではBoxDecorationのborderプロパティにBorder.allを使用して、枠線の色と幅を指定しています。Border.allの引数には、colorで枠線の色、widthで枠線の幅を設定します。これらの値を必要に応じて調整してください。

特定の辺にだけ枠線をつける

特定の辺だけにボーダーを付けるには、BoxDecorationのborderプロパティを使い、Borderクラスの特定の辺に対応するプロパティを設定します。

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    color: Colors.yellow,
    border: Border(
      // 下辺にのみボーダーを付ける
      bottom: BorderSide(
        color: Colors.black, // 枠線の色
        width: 2.0, // 枠線の幅
      ),
    ),
  ),
);

この例では、Borderクラスのbottomプロパティを使用して下辺にボーダーを付けています。他の辺にボーダーを付けたい場合は、Borderクラスの対応するプロパティ（top、left、right）を設定してください。

Seeds

【Flutter】Containerの角を丸めるには？ | Seeds Containerウィジェットの角を丸くするにはBoxDecorationを使用してborderRadiusプロパティを設定します。四隅を丸める Container( width: 250, height: 250, decoration