【Flutter】SizedBox|Widgetのサイズを変更・空きスペースの大きさを調整

おすすめプログラミングスクール

▶︎ 侍エンジニア
Flutterが学習できるプログラミングスクール。エキスパートコースは転職・就職サポート付き
「エキスパートコース」の詳細は無料カウセリングで相談

▶︎ DMM WEBCAMP
自社開発・受託開発企業への転職実績多数。受講開始20日以内なら無条件で全額返金。


▶︎
ポテパンキャンプ
Webエンジニア輩出No.1。開発できる開発企業への転職成功をサポート。全額返金保証あり。


▶︎
テックブースト
フリーランス特化型プログラミングスクール。スクール在籍中に案件受注から納品を体験できる。

今回はSizedBox の基本的な使い方を紹介します。

SizedBox を使えば指定したWidgetのサイズ(高さ・横幅)を変更、空きスペースの大きさを調整できます。

スポンサーリンク

目次

指定したwidgetのサイズを変更

SizedBox(
  width: 200,
  height: 150,
  child: Card(elevation: 10),
),

SizedBoxchild でWidgetを指定し、width height を使ってサイズを調整します。

親Widgetのサイズいっぱいに広げる

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: SizedBox.expand(
    child: Card(elevation: 10),
  ),
),

SizedBox.expand を使えばchild で指定したWidgetが親Widgetの大きさいっぱいに広がります。

指定したWidgetを正方形としてサイズ調整

SizedBox.square(
  child: Card(elevation: 10),
  dimension: 200,
),

SizedBox.squaredimention にピクセル値を渡して、指定したWidgetを正方形でサイズ調整できます。

SizedBoxで空きスペースをつくる

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 150,
      width: 150,
      color: Colors.red,
    ),
    SizedBox(width: 50),
    Container(
      height: 150,
      width: 150,
      color: Colors.yellow,
    ),
    SizedBox(width: 150),
    Container(
      height: 150,
      width: 150,
      color: Colors.blue,
    )
  ],
),

SizedBoxchild を使用せずに空きスペースをつくることもできます。

一緒に読みたい

参考

スポンサーリンク

  • URLをコピーしました!
目次