Closed github-actions[bot] closed 4 months ago
以下の条件の画面レイアウトを作ってみましょう。
Placeholder の幅は画面の幅の半分
青字と赤字の Text の幅は Placeholder の幅の半分
Placeholder の高さと幅は同じ
Text の上下に 16 logical pixel のパディング
Text の文字は ** ℃
** ℃
Text の水平位置は中央
Text のスタイルは Theme.of(context).textTheme で取得してきた TextTheme の labelLarge
Theme.of(context).textTheme
TextTheme
labelLarge
Text の色は左が Colors.blue、右が Colors.red
Colors.blue
Colors.red
Placeholder の水平中央は画面の中央と同じ
Placeholder と Text を合わせた矩形の垂直中央は画面の中央と同じ
Text と TextButton の隙間は 80 logical pixel
Text と TextButton の水平中央は同じ
Flutter には iOS の NSLayoutConstraint や Android の ConstraintLayout のようなものはありません。
以下の Widget を利用するとさまざまな画面に対応することができます。
Flutter Inspector を利用すると、レイアウト構造を視覚化でき、より開発しやすくなります。 便利な機能がたくさんあるので、実際に試しながらしっかり読み込んでおきましょう。
天気予報アプリの画面レイアウトを構成する
課題
以下の条件の画面レイアウトを作ってみましょう。
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 を利用するとさまざまな画面に対応することができます。
Flutter Inspector を利用すると、レイアウト構造を視覚化でき、より開発しやすくなります。 便利な機能がたくさんあるので、実際に試しながらしっかり読み込んでおきましょう。