Flutterサンプルアプリの基本！現役エンジニアが徹底解説。

Flutter入門の第2弾として今回は、サンプルアプリの基本についての解説を書きました！

HATOBA

そもそもFlutterが何かよく分かっていない、まだ環境構築ができていないという方は、ぜひこちらの記事を参考にしてください↓

あわせて読みたい

ページが見つかりませんでした – しんげつBlog🌑

今回の記事の内容

1. Flutterサンプルアプリの基本
2. サンプルアプリの仕組み徹底解説
3. Flutterサンプルアプリの構成要素
4. FlutterサンプルアプリのUIの考え方

HATOBA

こんにちは。この記事を書いたHATOBA(はとば)です。

【PR】ゼロから学ぶFlutterアプリ開発(Kindle版)

1. Flutterサンプルアプリの基本

サンプルアプリの基本を理解すると、アプリ開発が驚くほど簡単に進むため、「どんな仕組みで出来ているか」という大枠を最初につかむことが大切です。

Flutterは画面の仕組みがシンプルで、どのアプリも同じ考え方で作れます。
基本理解を先に固めてておけば、後の応用がぐっと楽になるはずです。

まずFlutterの特徴を整理すると、以下のようになります。

本記事では、Flutterのサンプルアプリを題材に、基本の仕組み・コードの意味・公式リファレンスの重要部分をわかりやすく整理していきます。

Flutterサンプルアプリでできること

サンプルアプリから、アプリ開発の基本動作を素早く学びましょう。
画面表示、ボタン操作、状態の変化など、アプリの基本のポイントはサンプルアプリを通じてひと通り抑えられます。

初心者～中級者の場合、いきなり複雑なアプリに手を出すより、まずサンプルアプリを深掘りする方が効率的です。小さな成功体験を積みやすいため、理解が早まります。

Flutterが人気の理由

Flutterが人気を集める理由は、「1つのコードで複数端末に対応できる利便性」と「学びやすさ」にあります。
この2つのメリットが、サンプルアプリの存在意義をさらに強めています。

具体的には次の点が評価されています。

FlutterはGoogleが開発しており、アップデートも活発です。
そのため、安定した技術基盤の上で学習できる安心感もあります。

2. サンプルアプリの仕組み徹底解説

Flutterがどのようにアプリを動かしているのか理解すると、コードの意味がいっそう明確になります。特に「main関数」と「runApp」が果たす役割はとても重要です。

HATOBA

まず以下のコードをざっと眺めてみましょうか。
flutter createコマンドで出力できるコードですね。

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

HATOBA

この60行ほどだけ見ても「うわっ！」となっちゃうでしょうか？笑
小さい部分に切り分けて、落ち着いて見ていけば大丈夫ですよ
丁寧に解説するので安心してください。

Flutterアプリは「main関数 → runApp → ウィジェット」の順番で動きます。これはプログラムの入口を示す大切な流れで、すべてのアプリがこの形を取っています。

Flutterアプリを動かすmain関数

まず、main関数はアプリのスタート地点となっています。
3行目のmain関数のポイントは次のとおりです。

• アプリが最初に読む場所
• 画面の起動をrunAppに指示する
• 必要な初期化処理を書くこともできる

HATOBA

サンプルコードではこう書いてありますよね。

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

この部分がまずアプリ全体を動かします。
アプリの「スタートスイッチ」と覚えるとわかりやすいでしょう。

「ウィジェット」という概念について

続いてFlutterアプリ開発における「ウィジェット」という概念について、まずは押さえておきましょう。

原文は英語なんですが、公式リファレンスの “Building user interfaces with Flutter” という項目の冒頭にはこう書いてあります。

Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

※これを記載している公式リファレンスのリンクを下に貼っておきますね↓

 https://docs.flutter.dev/ui

HATOBA

何これ…?? 冒頭からいきなりムズいわw
ただ、噛み砕いて日本語訳するとだいたいこんなニュアンスかなと思います↓

ウィジェットは、その「現在の設定（構成）と状態」に応じてビュー（見た目）を表現します。
状態が変化すると、ウィジェットはそのビューの定義を再度作り直し、フレームワークはその定義を前回のものと比較して、描画対象（レンダーツリー）に対して必要最小限の変更を適用します。

HATOBA

とりあえずウィジェットというのは、「アプリのUIの見た目を表現するオブジェクト」なんだな、ということが分かれば、ひとまずOKです。
そして、「状態が変化」した時に「状態の変更に応じて」見た目を再度更新する処理をするんですが、その見た目の変更点を最小限に抑えるための工夫があるよ、という意味ですね。

runAppの役割

runAppの役割は、画面の最初のウィジェット（ルート）をFlutterに渡すことです。

実際に行っていることは次のとおりです。

runAppは、サンプルアプリの世界観をつくる最も重要な関数といえます。
ここで指定したウィジェットが、その後の画面すべての基礎になります。

3. Flutterサンプルアプリの構成要素

Flutterのサンプルアプリは複数の基本ウィジェットから成り立ちます。特に重要なのは次の5つです。

• StatelessWidget
• StatefulWidget
• MaterialApp
• Scaffold
• AppBar

これらは公式リファレンスでも繰り返し登場する基本であり、アプリ作成の必須要素といえます。

画面を作るStatelessWidgetとは

StatelessWidgetは「変化しない画面」を作るためのウィジェットです。
つまり、表示が固定されている部分に使うウィジェットということです。

StatelessWidgetの特徴は次のとおりです。

例えば、タイトル文字や背景色などは毎回変わらないため、StatelessWidgetで十分です。

HATOBA

サンプルコードの7行目に出てきてましたね！
MyAppクラスは「変化しないStatelessな」ウィジェットだということです。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Flutterを学ぶ最初の段階では「動かない画面＝StatelessWidget」と覚えると理解しやすくなります。

動きに強いStatefulWidgetとは

StatefulWidgetは、画面が変わる部分を表現するためのウィジェットです。
先ほど提示したカウンターアプリのサンプルコードを見れば分かりやすいですね。

StatefulWidgetには次の利点があります。

例えば「数字が増える」「ボタンの色が変わる」など、動きがある部分にはStatefulWidgetを使います。

HATOBA

サンプルコード22行目のMyHomePageクラスがこれに該当します。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

公式リファレンスでは「状態が変わると、ウィジェットはUIの記述を再構築する」と説明されています。
これは「画面の定義を作り直す」という意味であり、Flutterの核心といえる動きです。

アプリの土台となるMaterialApp

MaterialAppは、Flutterアプリの最上位に置かれる大切なウィジェットです。
MaterialAppを利用して、アプリ全体のテーマやルート（画面遷移の土台）を設定するためです。

MaterialAppの役割は次のとおりです。

MaterialAppを使うことで、「アプリ全体の環境」をまとめて設定できるという訳です。

基本画面を作るScaffoldとAppBar

Scaffoldは、StatelessWidgetを継承したオブジェクトで、静的な画面構成の「骨組み」を作るウィジェットです。
AppBarはその中に置くタイトルバーの部分になります。

ScaffoldとAppBarを使用するメリットは次の通りです。

HATOBA

サンプルコード31行目は、MyHomePageの状態を表すための_MyHomePageStateクラスです
build()メソッド内に、ScaffoldとAppBarと書いてありますね
これをちょっと眺めてみましょう。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

HATOBA

build()メソッド内では return Scaffold()と書いてあって、状態変化(このサンプルの場合だとカウンター数の増加)に応じてこの処理を実行します
画面構成すべてをひっくるめたScaffoldを再度生成して”見た目の最小限の変更”を、画面上へ反映する仕組みになっているようです
AppBarはその中でタイトルバーやボタンを置く(静的で変化しない)部分を構成しています。

つまり、Scaffoldはサンプルアプリの中で、
「画面構成の大枠をつくるウィジェット」
という意味で捉えればよいと思います。

[PR] IT・Webのスカウト転職サービスなら【レバテックダイレクト】まずは無料登録！

当ブログでは、ある程度経験をお持ちのITエンジニア・クリエイターの方向けの転職サービスとして「レバテックダイレクト」をおすすめしてます。

※画像をクリック/タップするとトップページを開けます↓

どういうサービス？

レバテックダイレクトは、ITエンジニア・デザイナーに特化したスカウト型転職サービスです。
最大の特徴は、企業から直接スカウトが届く仕組みにあります。

一般的な転職エージェントとは異なり、担当者を挟まずに企業とやり取りできるため、
「自分の技術や経験をどう評価しているのか」をダイレクトに知ることが可能です。

特に中堅以上のITエンジニア・クリエイターの方々にとって、以下が魅力的なようです。

「とりあえず数を打つ転職活動」ではなく、
自分の市場価値を確認しながら、質の高いオファーを待つという使い方のできる点が強みと言えます。

申込方法教えて！

利用開始までの流れは非常にシンプルで、日々の忙しさの中でも負担になりません。

特に重要なのはプロフィール入力ですね。
以下のような情報を具体的に書くことで、スカウトの質が大きく変わります。

• 実務で使用してきた言語・フレームワーク
• 担当フェーズ（設計・実装・レビューなど）
• チーム規模や役割

「何をどこまでできるか」を正確に書くだけで、企業側の反応が良くなると思います。

評判とか口コミどうなん？

サービス全体のUIは、シンプルで装飾が少なく、求人情報や技術条件が見やすく整理されています。

また、求人ページでは以下のような情報が確認できます。

「入社してみないと分からない情報」が事前に把握できるため、
転職後のミスマッチを防ぎやすい点も好印象です。

登録するメリットは？

レバテックダイレクトを使う最大のメリットは、中堅以上のITエンジニア・クリエイターの方の市場価値を客観的に知れることです。

具体的には、以下のような効果が期待できます。

「今すぐ転職するつもりはない」という方であっても、
情報収集目的だけでも登録する価値はありますよね！

料金どのぐらいなの？

求職者側の利用料金は他社のサービスと同様、もちろん完全無料です。

• 会員登録
• 求人検索
• スカウト受信
• 企業とのやり取り

これらすべてに費用はかかりません。
費用は企業側が負担する仕組みのため、
エンジニアはリスクなく利用できます。

それって私向きなの？

レバテックダイレクトは、特に以下のような方におすすめです。

「経験は積んできたが、次にどう動くべきか迷っている」
→ そんなタイミングで使うと、非常に相性の良いサービスです！

一方で、以下のような方には向かない可能性があります。

レバテックダイレクトは、基本的に「自分で判断し、動けるエンジニア向け」のサービスです。
そのため、手取り足取りのような支援を求める場合は、
転職エージェントとの併用が現実的でしょう。

HATOBA

とりあえず無料登録して待ってるだけでスカウト来るなら、ちょっとお試しでもやってみる価値ありますよね～

興味ある方はぜひこちらから↓ まずはサクッと無料登録してみてください！

4. FlutterサンプルアプリのUIの考え方

FlutterのUIは「ウィジェットを積み上げて作る」という考えに基づきます。
積み木のように小さな部品を組み合わせて画面全体を構築していくイメージです。

ウィジェットで画面を組み立てる

Flutterはすべてがウィジェットで成り立っています。理由として、画面全体を小さい部品の集まりとして扱うことで構造が理解しやすくなるためです。

画面を構成する要素は次のようなウィジェットです。

• Container
• Text
• Row / Column
• Icon
• Image
• Padding / Margin

これらを組み合わせることで、画面に必要なあらゆる要素を表現できます。

レイアウトの基本（Row・Columnなど）

レイアウトには「横に並べる」「縦に並べる」などの配置が必要になります。
これを実現しているのがRowとColumnです。

RowとColumnの特徴は次のとおりです。

レイアウトはアプリの見やすさに直結するため、RowとColumnについてはしっかり押さえておきたいですね。

入力やタップの動きを付ける方法

アプリには、ユーザーが触って操作する仕組みが欠かせません。Flutterでは簡単にタップの動きをつけられます。

代表的なウィジェットは次のとおりです。

• ElevatedButton
• GestureDetector
• IconButton
• FloatingActionButton

これらはクリックの動作を持っており、関数を渡すだけで動きを付けられるため非常に便利です。

まとめ

今回は扱いませんでしたが、この次のステップとしては「イベント処理」「画面遷移」について学習するのがよいかと思います。

HATOBA

意欲的な読者の方のために、以下のリンクを紹介しておきますね！

＜初めての Flutter アプリ —Google Codelabs＞

 https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0

繰り返しになりますが、本記事の内容は以下の通りでした。

今回の記事の内容

1. Flutterサンプルアプリの基本
2. サンプルアプリの仕組み徹底解説
3. Flutterサンプルアプリの構成要素
4. FlutterサンプルアプリのUIの考え方

HATOBA

疑問点については、記事のコメント欄や、X(Twitter)のDMでも質問受け付けてます。お気軽にどうぞ～
ここまで読んでくれてありがとう！

[PR] Flutter実践開発 ── iPhone／Android両対応アプリ開発のテクニック WEB+DB PRESS plus (Kindle版)