先生と生徒の会話形式で理解しよう

生徒

「Flutterを使ってアプリを作ってみたいんですが、ウィジェットってよく聞くんです。ウィジェットって何なんですか？」

先生

「Flutterのウィジェットは、画面上の見た目や機能を構成する基本的な部品のことを指します。ボタン、テキスト、レイアウトすべてがウィジェットです。」

生徒

「なるほど！でも、それって具体的にはどのように使うんですか？」

先生

「じゃあ、Flutterのウィジェットの仕組みと使い方を実際に見てみましょう。」

1. Flutterのウィジェットとは？基本の考え方

Flutter（フラッター）は、Googleが開発したクロスプラットフォーム開発フレームワークで、iOSアプリやAndroidアプリをひとつのコードベースで作成できます。そしてFlutterの最大の特徴が、「すべてがウィジェット」でできているという点です。

たとえば、Textウィジェットで文字を表示し、Containerウィジェットで見た目を装飾し、ColumnやRowウィジェットで画面のレイアウトを作っていきます。

つまり、画面のあらゆる要素がウィジェットで構成されており、初心者がFlutterを学ぶうえで最初に理解すべきキーワードが「ウィジェット」なのです。

2. ウィジェットの種類：StatelessとStateful

Flutterのウィジェットには、大きく分けて2種類あります：

StatelessWidget（ステートレスウィジェット）：状態を持たないウィジェット
StatefulWidget（ステートフルウィジェット）：状態を持ち変化するウィジェット

StatelessWidgetは、表示内容が変わらない部分に使用します。逆に、ユーザー操作などによって内容が変わる部分にはStatefulWidgetを使います。

3. StatelessWidgetのサンプルコード

実際に、StatelessWidgetのシンプルなサンプルコードを見てみましょう：


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutterウィジェットの基本')),
        body: Center(
          child: Text('こんにちは、Flutter！'),
        ),
      ),
    );
  }
}

このコードでは、MyAppクラスがStatelessWidgetを継承しており、buildメソッドの中で画面全体の構成が定義されています。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. StatefulWidgetのサンプルコード

次に、状態が変化するウィジェットの例として、ボタンを押すたびにカウントアップされるアプリを紹介します。


import 'package:flutter/material.dart';

void main() {
  runApp(CounterApp());
}

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('カウントアップアプリ')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('ボタンを押した回数: $_count'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _increment,
                child: Text('カウントアップ'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

StatefulWidgetはcreateStateメソッドで状態管理クラスを作成し、setStateでUIを再描画します。

5. よく使うFlutterウィジェット一覧（初心者向け）

Flutterでは非常によく使われるウィジェットがいくつかあります。ここで代表的なものを一覧で紹介します。

Text：テキストを表示する
Image：画像を表示する
Icon：アイコンを表示する
Container：レイアウトや装飾用の箱
Column / Row：縦・横に並べるレイアウト
Padding / Margin：余白の調整
ElevatedButton：ボタンを表示する
ListView：リスト表示

これらの基本ウィジェットを覚えるだけでも、シンプルなアプリを作ることができるようになります。

6. ウィジェットの入れ子構造と階層の考え方

Flutterではウィジェットを他のウィジェットの中に入れて、階層的に構成するのが基本です。これを「ウィジェットツリー」と呼びます。

ウィジェットツリーの概念を理解すると、複雑な画面構成でもスムーズに設計できます。


Center(
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text('入れ子のウィジェット'),
  ),
)

この例では、TextウィジェットがContainerに包まれ、それがさらにCenterで中央配置されています。

7. Flutterのウィジェットを活用したUI設計のコツ

FlutterではUIの自由度が高いため、ウィジェットをうまく使いこなすことで、オリジナリティのあるアプリを作れます。以下のようなコツを押さえましょう。

レイアウトはColumnやRowで整理
PaddingやSizedBoxで余白を意識
UIの再利用にはWidgetの切り出しが有効
状態の変化を意識して、StatefulWidgetを使う

特に初心者は、既存ウィジェットを組み合わせて小さなUI部品を作り、それを繰り返し使うことで効率的な開発が可能になります。

まとめ

Flutterウィジェットの基本を総復習

この記事では、Flutterにおけるウィジェットの考え方と使い方について、初心者向けに順を追って解説してきました。 Flutterの最大の特徴は「すべてがウィジェットでできている」という点にあります。文字を表示するテキスト、画面の配置、余白、色、ボタン、画像、さらにはアプリ全体の構造まで、すべてがウィジェットとして定義され、組み合わせることで画面が作られます。この考え方を理解することが、Flutterアプリ開発の第一歩になります。

ウィジェットを理解することで、Flutterのコードが「なぜこの形になっているのか」が自然と見えてきます。初心者のうちはコードの量が多く感じられるかもしれませんが、その多くはウィジェットを並べたり包んだりしているだけです。ウィジェットを部品として捉えられるようになると、Flutter開発は一気に分かりやすくなります。

StatelessWidgetとStatefulWidgetの重要な違い

Flutterのウィジェットには、StatelessWidgetとStatefulWidgetという二つの基本的な種類があることを学びました。 StatelessWidgetは状態を持たず、表示内容が変わらない画面に向いています。一方、StatefulWidgetは状態を持ち、ユーザー操作や時間の経過によって画面が変化する場面で使われます。

この二つの使い分けは、Flutter初心者がつまずきやすいポイントでもありますが、「画面の内容が変わるかどうか」という視点で考えると判断しやすくなります。ボタンを押して数字が増える、入力内容によって表示が変わる、といった場合はStatefulWidgetが必要です。逆に、説明文や固定の見出しなどはStatelessWidgetで十分です。

ウィジェットツリーと入れ子構造の考え方

Flutterではウィジェットを入れ子にして画面を構成します。この構造は「ウィジェットツリー」と呼ばれ、親ウィジェットの中に子ウィジェットが配置されていきます。最初は深い入れ子構造に戸惑うかもしれませんが、どのウィジェットがどの役割を持っているのかを意識すると理解しやすくなります。

例えば、中央に配置したい場合はCenter、見た目を整えたい場合はContainer、縦や横に並べたい場合はColumnやRowといったように、役割ごとにウィジェットを組み合わせます。この考え方に慣れることで、複雑な画面構成でも整理して設計できるようになります。

まとめ用シンプルサンプル：ウィジェットの組み合わせ


Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Flutterウィジェットの基本'),
      SizedBox(height: 16),
      ElevatedButton(
        onPressed: () {},
        child: Text('ボタン'),
      ),
    ],
  ),
)

このサンプルでは、Centerの中にColumnを配置し、文字とボタンを縦に並べています。 Flutterではこのようにウィジェットを積み重ねて画面を作るのが基本です。一つ一つのウィジェットはシンプルですが、組み合わせることで表現の幅が大きく広がります。

Flutter初心者がウィジェットを学ぶ際のポイント

Flutter初心者がウィジェットを学ぶ際は、いきなり難しいUIを作ろうとせず、小さな画面や簡単な構成から始めるのがおすすめです。まずはText、Container、Column、Rowといった基本ウィジェットを使い、画面がどのように組み立てられているのかを確認しましょう。

そして、状態が変わる場面ではStatefulWidgetを使い、 setStateによって画面が再描画される仕組みを体感することが大切です。この流れを理解できれば、ボタン操作やフォーム入力など、実用的なFlutterアプリ開発へと自然にステップアップできます。

先生と生徒の振り返り会話

生徒

「Flutterのウィジェットって、最初は難しそうに見えましたが、画面の部品を組み立てているだけだと分かって、少し安心しました。」

先生

「その理解はとても大切ですね。 Flutterはウィジェットの考え方さえ押さえれば、 UI設計が一気に分かりやすくなります。」

生徒

「StatelessWidgetとStatefulWidgetの違いも、画面が変わるかどうかで考えると理解できました。」

先生

「その調子です。小さなサンプルをたくさん作って、ウィジェットの組み合わせに慣れていくと、 Flutter開発がどんどん楽しくなりますよ。」

生徒

「まずは基本ウィジェットを使って、シンプルな画面を作るところから練習してみます。」

Flutterのウィジェットとは？初心者向けに仕組みと使い方を解説