[Widget]四角形の枠を作る

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

Flutterで四角形の枠を作りたいときはContainerを利用することで実現可能です。
以下のコードを見てください。

Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: const Color(0x00000000),
border: Border.all(
color: Colors.blue,
width: 10.0,
),
borderRadius: BorderRadius.circular(32.0),
),
),

decoration:BoxDecorationを設定し、その中にContainerの見た目に関する設定を追加しています。
border:が枠線の設定です。

Border.all の中にcolor:で線の色、width:で線の幅を設定しています。

color:に透明色を指定することで塗りつぶしは無効にしています。

以下のサンプルで16行目の親Containercolor:で薄い青色を設定しています。
この色が19行目のContainerの枠内にも出ていることから透明になっているのがわかります。

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