[Widget]角丸の四角形を作る方法

動作環境: Flutter 2.8.1 Dart 2.15.1
LINEでこのページを共有するTwitterでこのページを共有するこのページをはてなブックマークに追加

Flutterで角が丸い四角形を作るときはContainerを利用します。
以下のコードを見てください。

Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(16.0),
),
),

decoration:BoxDecorationを設定し、その中にContainerの見た目に関する設定を追加しています。
borderRadius:が角丸の設定ですね。

BorderRadius.circular(16.0) としていますが、この16.0を変えることで丸みの度合いを調節することができます。

ちなみにdecoration:を使用したときは装飾に関する設定はすべてdecoration:の中に書かないと動きません。
color:は本来Container配下でも設定可能ですが、decoration:を指定しているときはそちらに書かないと動作しなくなってしまうようです。

*「Run」を押すと実行できます。