Flutterで「丸・四角・角丸」を作る方法（サンプル付き）

丸・四角・角丸の作り方です。

この記事では、基本的な図形の作り方をサンプルコード付きで解説します。

四角

Container(
  width: 100,
  height: 100,
  color: Colors.orange,
)

widthとheightを指定するだけで四角になります。

角丸

角を丸くしたい場合はBoxDecorationを使います。

 Container(
   width: 100,
   height: 100,
     decoration: BoxDecoration(
       color: Colors.orange,
       borderRadius: BorderRadius.circular(24),
     ),
 )

BorderRadius.circular(24)で角丸になります。

丸

丸を作る方法は2つあります。
BoxDecorationを使用する。

Container( 
  width: 100,
  height: 100,
    decoration: const BoxDecoration( 
      color: Colors.orange,
      shape: BoxShape.circle,
    ),
)

CircleAvatarを使用する。

const CircleAvatar(
  radius: 50,
  backgroundColor: Colors.orange,
)

これらを組み合わせるだけで、シンプルなUIからリッチなデザインまで作れそうですね。