Text、Container、Iconという三つの基本的な部品を通して、Flutterの大きな考え方であるウィジェットツリーを理解しましょう。
このレッスンを Kodokon で開くFlutterでは、すべてがウィジェットです。ウィジェットとはインターフェースの部品で、画面に現れるものの一部を記述したものです。テキストはウィジェット、アイコンはウィジェット、余白もウィジェット……そして画面全体もそうです！ インターフェースを作るには、ウィジェットをマトリョーシカのように互いの中に入れ子にします。それらが合わさってウィジェットツリーを作ります。各ウィジェットには親（それを含むもの）があり、ときには子（それが含むもの）もあります。最小限のプログラムをもう一度見て、そのツリーを眺めてみましょう。
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(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text(
"Everything is a widget!",
style: TextStyle(fontSize: 24),
),
),
),
);
}
}上から下へ見ていきましょう。MaterialAppは、Googleのビジュアル言語であるMaterial 3に従って、アプリ全体（テーマ、ナビゲーション）を設定します。Scaffold（文字どおり"足場"）は、画面の構造を提供します。背景、任意のタイトルバーなどです。Centerは子を中央に置き、Textはテキストを表示します。Textのstyleパラメーターは、文字のサイズ（fontSize）、色、太さを設定するTextStyleを受け取ります。では、なんでもこなす箱Containerを見てみましょう。これは、サイズ、色、中身をあなたが自由に決められる長方形です。
import 'package:flutter/material.dart';
Widget buildYellowBox() {
return Container(
width: 200,
height: 100,
color: Colors.amber,
child: const Center(
child: Text("I'm inside a box"),
),
);
}buildYellowBox関数はウィジェットを返します。このようにインターフェースを名前の付いた小さな部品に分けるのは、とてもよくある習慣です。このContainerは幅200ピクセル、高さ100ピクセルで、Colorsという色のカタログのおかげで自身をアンバー色（琥珀色）に塗り、中央に置かれたテキストを保持します。三つ目の基本的な部品はIconで、ピクトグラムを表示します。Flutterには、すぐに使えるアイコンがIconsカタログに何百も用意されています。星、ハート、家など……
import 'package:flutter/material.dart';
Widget buildStar() {
return const Icon(
Icons.star,
size: 48,
color: Colors.orange,
);
}ツリーの論理を覚えておきましょう。ウィジェットが一つだけの子を受け入れるとき、そのパラメーターはchildと呼ばれます（CenterとContainerがその例です）。最初の例では、ScaffoldがCenterの親で、CenterがTextの親です。Flutterはこのツリーを上から下へたどって画面を描きます。誰が誰の親なのかを見分けられれば、どんなFlutterのインターフェースでも読めるようになります。
Center(child: Text("Hi"))で、どちらのウィジェットが親ですか？childパラメーターを通してTextを保持しているから