ウィジェットツリー

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 3/32。

ウィジェットはほかのウィジェットの中に配置します。別のウィジェットを保持するウィジェットは、そのウィジェットをchild:に渡します。たとえば、次のCenterのようにします。

Center(
  child: Text('Hello'),
)

Center自体は何も描画しません。子ウィジェットを受け取り、自分が使えるスペースの中央に配置します。これがないと、テキストは左上隅に表示されます。

ウィジェットの中にウィジェットがあり、その中にもウィジェットがある構造をウィジェットツリーと呼びます。アプリでは、ツリーはMaterialApp、次にScaffold、そしてそのbody:に配置したものから成ります。それぞれのウィジェットの子は括弧の中に記述するので、括弧を見るとツリーの構造がわかります。各行の末尾にあるカンマで、コードが整然とします。

チャレンジ

簡単

テキストが左上隅に張り付いています。画面の中央に配置されるように、Centerで囲みましょう。

body: Text('Right in the middle'),を、child:がそのTextであるCenterに置き換えましょう。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}