Session1

[github-actions]

天気予報アプリの画面レイアウトを構成する

課題

以下の条件の画面レイアウトを作ってみましょう。

• Placeholder の幅は画面の幅の半分

• 青字と赤字の Text の幅は Placeholder の幅の半分
  

• Placeholder の高さと幅は同じ
  

• Text の上下に 16 logical pixel のパディング

• Text の文字は ** ℃

• Text の水平位置は中央

• Text のスタイルは Theme.of(context).textTheme で取得してきた TextTheme の labelLarge

• Text の色は左が Colors.blue、右が Colors.red
  

• Placeholder の水平中央は画面の中央と同じ

• Placeholder と Text を合わせた矩形の垂直中央は画面の中央と同じ
  

• Text と TextButton の隙間は 80 logical pixel
  

• Text と TextButton の水平中央は同じ
  

ヒント

Flutter には iOS の NSLayoutConstraint や Android の ConstraintLayout のようなものはありません。

以下の Widget を利用するとさまざまな画面に対応することができます。

• Row
• Column
• Flexible
• Expanded
• AspectRatio
• FractionallySizedBox

Flutter Inspector を利用すると、レイアウト構造を視覚化でき、より開発しやすくなります。
便利な機能がたくさんあるので、実際に試しながらしっかり読み込んでおきましょう。