Session1

[github-actions[bot]]

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

課題

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

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

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

• Placeholder の高さと幅は同じ

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

• Text の文字は ** ℃

• Text の水平位置は中央

• Text のスタイルは 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

[trm11tkr]

weather_view.dart

```dart import 'package:flutter/material.dart'; class WeatherView extends StatelessWidget { const WeatherView({super.key}); @override Widget build(BuildContext context) { final deviceWidth = MediaQuery.of(context).size.width; return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( width: deviceWidth / 2, child: Column( children: [ const AspectRatio( aspectRatio: 1, child: Placeholder(), ), Padding( padding: const EdgeInsets.symmetric(vertical: 16), child: Row( children: [ Expanded( child: Text( '** ℃', textAlign: TextAlign.center, style: Theme.of(context) .textTheme .labelLarge ?.copyWith( color: Colors.blue, ), ), ), Expanded( child: Text( '** ℃', textAlign: TextAlign.center, style: Theme.of(context) .textTheme .labelLarge ?.copyWith( color: Colors.red, ), ), ), ], ), ), ], ), ), const SizedBox( height: 80, ), SizedBox( width: deviceWidth / 2, child: Row( children: [ Expanded( child: TextButton( onPressed: () {}, child: const Text('Close'), ), ), Expanded( child: TextButton( onPressed: () {}, child: const Text('Reload'), ), ), ], ), ), ], ), ), ); } } ```dart