【Flutter】Containerの角を丸めるには？

2023年11月25日2023年12月30日

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

Containerウィジェットの角を丸くするにはBoxDecorationを使用してborderRadiusプロパティを設定します。

四隅を丸める

Container(
  width: 250,
  height: 250,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16),
  ),
);

一部の角を丸くする

Container(
   width: 250,
   height: 250,
   decoration: const BoxDecoration(
     color: Colors.blue,
     borderRadius: BorderRadius.only(
       topLeft: Radius.circular(25), // 左上の角を丸める
       bottomRight: Radius.circular(25), // 右下の角を丸める
     ),
   ),
);

Seeds

【Flutter】Containerに枠線（Border）をつけるには？ | Seeds FlutterのContainerに枠線をつけるには、BoxDecorationを使用してborderプロパティを設定します。四辺に枠線をつける Container( width: 200, height: 200, decoration