このサイトはアドセンスやアフィリエイト広告を利用しています

Flutter&Dart

Flutter初心者ガイド：ウィジェットをHTMLでイメージで理解する

Flutterは「ウィジェット」という小さな部品を組み合わせて画面を作るフレームワークです。
この記事では、Flutterのウィジェットのネスト構造と、よく使うパーツをHTMLのタグに例えてわかりやすく解説します。

1. Flutterは「部品を積み上げる」構造

FlutterのUIはすべてウィジェットでできています。
ウィジェットは親子関係（ネスト）で入れ子のように重なり合い、まるでマインクラフトのブロックを積み上げるように画面を作ります。

Scaffold(
  appBar: AppBar(title: Text('タイトル')),
  body: Center(
    child: Text('こんにちは'),
  ),
)

この例では、Scaffoldが土台、AppBarが上部バー、bodyの中にCenterがあり、その中にTextがあります。
「土台の中にバーと中央に置いたテキスト」という具合に、パーツを順に積み上げているイメージです。

2. childとchildrenの意味

  • child は「1つだけ子要素を持つ」という意味
  • children は「複数の子要素をリストで持つ」という意味

例えば、

Center(
  child: Text('こんにちは'),
)

は1つの子要素（Text）を持つ例です。

Column(
  children: [
    Text('上'),
    Text('下'),
  ],
)

は複数の子要素（2つのText）を縦に並べています。

3. Flutterのよく使う親ウィジェットとHTMLの対応例

FlutterウィジェットHTML/CSSの対応役割の説明
Scaffold<body>画面の土台・構造
AppBar<header>画面上部のタイトルバー
Body<div> / <main>画面のメインコンテンツ
Container<div> + CSS装飾やサイズ調整
Centertext-align:center / flexbox中央寄せ中央配置
Column<div>縦積み / flexbox縦方向子を縦に並べる
Rowflexbox横方向子を横に並べる
PaddingCSSのpadding内側の余白
SizedBox<div>にwidth/height指定サイズ指定の空間

4. ContainerはCSS的な万能ボックス

Container はサイズ、色、余白、枠線などの装飾をまとめて指定できるウィジェットです。
HTMLでいうと「<div>にスタイルを付けたもの」のようなイメージです。

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(16),
  child: Text('装飾付きボックス'),
)

5. Containerは再利用できる

同じデザインのパーツを何度も使いたいときは、

方法①：関数化

 myBox(String label) {
  return Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text(label),
  );
}

呼び出し：

myBox('ボタン1');
myBox('ボタン2');

方法②：カスタムウィジェットとしてクラス化

class MyBox extends StatelessWidget {
  final String label;
  const MyBox(this.label);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text(label),
    );
  }
}

呼び出し：

MyBox('ボタン1');
MyBox('ボタン2');

6. まとめ

  • Flutterはウィジェットのネストで画面を作る。親ウィジェットの中に子ウィジェットを入れて積み上げる。
  • child は1つの子、children は複数の子を指定するときに使う。
  • ScaffoldやAppBar、ContainerなどはHTMLの<body>, <header>, <div>のような役割。
  • ContainerはCSS的な装飾ボックスで、幅・高さ・色・余白などを指定できる。
  • 似たパーツは関数やクラスでまとめて再利用可能。

Flutterのウィジェットは最初はネストが複雑に見えますが、「部品を積み上げて組み立てている」と考えると理解しやすくなります。
ぜひこのイメージをもとに、Flutterの学習を進めてみてください！

-Flutter&Dart