PR
Shuichi-Y
Unityでゲームを制作してみました… unityroomに公開できました… よろしくお願いいたします… m(__)m
Calendar
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(0)作成（Terrain）
(7)作成（ProBuilder）
(3)作成（Cube, Sphere）
(18)作成（Title, GAMEOVER）
(2)作成（VRoid）
(2)作成（Blender）
(26)作成（VRoid → Blender → Unity）
(15)作成（TreeIt）
(10)作成（TreeIt → Blender → Unity）
(3)作成（Unity_Scene）
(2)作成（調整）
(24)作成（その他）
(9)unityroom
(4)Led点灯（Arduino）
(2)C#のプログラミングのツボとコツ（書籍）
(4)Unity勉強（XR-Hub_小技集）
(39)Unity勉強（XR-Hub_ゲーム作成）
(12)Unity勉強（XR-Hub_C#）
(10)Unity勉強（本格入門）
(37)Unity勉強（Learn）
(189)作成（Blender → Unity）
(8)Flutter実践入門…
(28)Flutter入門講座
(55)LED Photos
(73)Comments
2024.01.18
カテゴリ： Flutter実践入門…
UI を中央に寄せる
ランダムな単語ペアの表示は十分改善されたので、次はアプリのウィンドウや画面の中央に配置しましょう。
まず、BigCard が Column の一部であることを思い出してください。Column はデフォルトで子を上部にまとめますが、これは簡単にオーバーライドできます。MyHomePage の build() メソッドを次のように変更します。
| // ... |
| class MyHomePage extends StatelessWidget { |
| @override |
| Widget build(BuildContext context) { |
| var appState = context.watch<MyAppState>(); |
| var pair = appState.current; |
| return Scaffold( |
| body: Column( |
| mainAxisAlignment: MainAxisAlignment.center, // ← Add this. |
| children: [ |
| Text('A random AWESOME idea:'), |
| BigCard(pair: pair), |
| ElevatedButton( |
| onPressed: () { |
| appState.getNext(); |
| }, |
| child: Text('Next'), |
| ), |
| ], |
| ), |
| ); |
| } |
| } |
| // ... |
すでに子は交差軸に沿って中央寄せされています（言い換えれば、すでに水平方向に中央寄せされています）。しかし Column 自体は Scaffold 内で中央寄せされていません。これは Widget Inspector で確認できます。
Widget Inspector はこの Codelab の範囲外ですが、Column がハイライト表示されているとき、それがアプリの幅全体を埋めていないのがわかります。子が必要とする水平方向のスペースしか埋めていません。
この Column 自体を中央寄せすることができます。Column にカーソルを置き、[Refactor] メニューを呼び出し（Ctrl+. または Cmd+.）、[Wrap with Center] を選択します。
アプリの表示は変わっているはずです。
必要に応じて、もう少し調整できます。
・BigCard の上の Text ウィジェットは削除できます。説明的なテキスト（「A random AWESOME idea:」）は、それがなくても理解できる UI になっているので、もはや不要だと言えるでしょう。そのほうがすっきりします。
・BigCard と ElevatedButton の間に SizedBox(height: 10) ウィジェットを追加することもできます。そうすれば、2 つのウィジェットの間隔が少し広がります。SizedBox ウィジェットはスペースを埋めるだけで、それ自身は何もレンダリングしません。視覚的な「ギャップ」を作るためによく利用されます。
このようなオプションの変更を加えると、MyHomePage のコードは次のようになります。
| // ... |
| class MyHomePage extends StatelessWidget { |
| @override |
| Widget build(BuildContext context) { |
| var appState = context.watch<MyAppState>(); |
| var pair = appState.current; |
| return Scaffold( |
| body: Center( |
| child: Column( |
| mainAxisAlignment: MainAxisAlignment.center, |
| children: [ |
| BigCard(pair: pair), |
| SizedBox(height: 10), |
| ElevatedButton( |
| onPressed: () { |
| appState.getNext(); |
| }, |
| child: Text('Next'), |
| ), |
| ], |
| ), |
| ), |
| ); |
| } |
| } |
| // ... コピペなので動いて当然なのかな… 一つ一つは理解できても全体では分からなくなってますね…  |
お気に入りの記事を「いいね！」で応援しよう
[Flutter実践入門…] カテゴリの最新記事
-
flutterでアプリの作成…？（初めての Flut… 2024.01.27
-
flutterでアプリの作成…？（初めての Flut… 2024.01.26
-
flutterでアプリの作成…？（初めての Flut… 2024.01.25
【毎日開催】
15記事にいいね！で1ポイント
・2026.05
・2026.04
・2026.03
・2026.04
・2026.03
・2026.02
・2026.01
・2026.01
© Rakuten Group, Inc.
