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

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

HATOBA

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

あわせて読みたい

【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] 自宅で現役エンジニアから学べる TechAcademy(テックアカデミー) まずは無料相談！

当ブログでは、IT業界への転職、副業・フリーランスとしての働き方を目指している方に
「自宅で現役エンジニアから学べる TechAcademy」をおすすめしてます。

当ブログから申し込みの無料相談で「必ずもらえるAmazonギフト券500円分」をゲットしよう！

完全オンライン完結型の学習サービスなので、場所や時間を選ばず、
自宅やカフェなど好きな環境で効率的にスキルを磨けます。

どういうサービス？

最大の特徴は、指導を担当するのがすべて現役のプロエンジニアである点です。
実務で使われる知識や考え方を直接学べるため、教材だけでは得られない実践的なスキルを習得できます。

学習中は週2回のマンツーマンメンタリングで進捗確認や課題のフィードバックが受けられるほか、
毎日15時〜23時に対応しているチャットサポートを活用すれば、疑問点をその日のうちに解消可能です。

HATOBA

コース申し込まれる方は初心者が9割以上らしいですよ～ ほぼ未経験とかでも心配いらないです！

挫折しにくい学習設計が用意されているため、独学で続かなかった方でも安心です。

教育訓練給付金の対象コースでは最大70％（約38万円）の補助が受けられるのも魅力！

申込方法教えて！

興味ある方は、まず公式サイトの無料相談や無料体験を申し込んでみてください(※下側に画像リンクを用意してます)

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

受講生の印象としては
「サポートが丁寧で続けやすい」「転職活動で役立った」
という声が多く、

一方で「担当によって対応に差がある」といった口コミも一部あります。

とはいえ、全体的にはオンラインでありながら、受講者に寄り添ってくれる指導スタイルが好評です。

受講するメリットは？

TechAcademyのメリットは「学んだスキルをそのままキャリアにつなげやすい点」です。
受講中に作成するポートフォリオは転職や案件獲得の武器になり、
キャリア支援サービス「TechAcademyキャリア」ではポートフォリオ添削や面接対策、
企業からのスカウトを受けることも可能。

HATOBA

受講した人には副業の仕事を１案件以上斡旋してくれるんだって～

転職はもちろん、副業で案件を取るためのノウハウも学べるため、
学習から収入アップまでの流れをスムーズに描けます。

料金どのぐらいなの？

料金はコースや期間によって異なりますが、例えばPythonやWeb開発の4週間コースは社会人で約17万円から。
より長期的に学ぶプランや転職保証コースでは数十万円〜最大80万円台となります。

ただし給付金制度や割引を活用すれば、実質的な負担を大きく減らすことが可能です。

それって私向きなの？

このように、TechAcademyは

という方に
最適な学習サービスです。

逆に、

にはあまり向かないかもしれません。

もし

• 今の仕事に不安がある
• 副業で新しい収入源を得たい
• 将来フリーランスとして自由に働きたい

と思っているのであれば
TechAcademyはキャリアを大きく変えるきっかけになるはずです。

HATOBA

こちらのリンクから申し込みの無料相談でAmazonギフト券500円分が必ずもらえますよ～ やってみて損はないはず！

興味ある方はぜひこちらから↓ まずは無料相談の申し込みをしてみてください！

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版)