Flutter入門：まずChromeでカウンターを動かそう

ひよこ

Flutterなら、スマホのアプリを作れる？

ペンギン先生

作れるよ。Dartで画面を組み立てる仕組みで、複数のプラットフォームに対応しているんだ。まずChromeでカウンターを動かすと、画面と状態の関係をつかみやすいよ。

ひよこ

何を入れればいい？

ペンギン先生

公式の手順に沿ってFlutter SDKとVS CodeのFlutter拡張を用意しよう。今回の実行先はChromeだよ。AndroidやiOSの環境を全部そろえる前に始められるんだ。

ひよこ

doctorの警告が全部なくならないとダメ？

ペンギン先生

今回使うWebの環境に必要な項目を確認しよう。使わないAndroid環境の警告だけなら、Webでの練習を進められる場合があるよ。エラーの対象を見分けるのが大切だね。

ひよこ

Widgetって何？

ペンギン先生

文字・ボタン・配置など、画面を表す部品だよ。MaterialAppの中にScaffold、その中にTextを置くように、木の形に組み合わせて画面を作るんだ。

ひよこ

StatelessWidgetは表示が絶対変わらない？

ペンギン先生

そうではないよ。渡された値や周りの情報が変われば作り直される。自分で変化する状態を持つ部分には、StatefulWidgetとStateを使えるよ。

ひよこ

押した回数を増やすには？

ペンギン先生

Stateに整数を持ち、ボタンからsetStateの中で1を足そう。この例では変更をFlutterへ知らせ、数字を表示している部分の更新を促すよ。

ひよこ

そのままiPhoneで動かせる？

ペンギン先生

iOSのビルドと実行にはMacとXcodeなどが必要だよ。Androidにも専用のSDKや実行先が要る。コードを共有できても、環境・権限・配布の準備まで同一になるわけではないんだ。

ひよこ

覚え方を教えて！

ペンギン先生

「Flutter」って出てきたら「Dartで画面の部品を組み、複数の環境へ届ける仕組み」と思えばだいたいOK！

最初のゴール：Chromeで0→1→2

まずWebブラウザで、ボタンを2回押すと数字が2になるカウンターを動かします。スマホの公開設定や、複雑な状態管理ライブラリは後で学べます。

準備するのはFlutter SDK、VS CodeとFlutter拡張、Chromeです。公式のクイックスタートで自分のOSを選び、SDKをセットアップしてください。設定後はターミナルとVS Codeを開き直します。

flutter --version
flutter doctor
flutter devices
flutter create myapp
cd myapp
flutter run -d chrome

flutter devicesでChromeが実行先として見えることを確認します。flutter doctorの警告は対象を読み分け、今回使うWebの環境を整えましょう。AndroidやiOSへ進むときに、その対象の不足項目を解消します。

lib/main.dartをカウンターにする

生成されたlib/main.dartを、次の内容に置き換えます。

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(
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('$_count', style: const TextStyle(fontSize: 48))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

起動中なら変更を保存して、開発ツールのホットリロードを実行します。新しく起動するならflutter run -d chromeを使います。0が表示され、＋を2回押すと2になれば成功です。

Widgetと状態を分けて読む

• MyApp：アプリ全体の入れ物です。MaterialAppを返します。
• CounterPage：変化する画面のWidgetです。状態を持つStateを作ります。
• _CounterPageState：_countを保持します。Textがその値を表示し、ボタンが値を変えます。

StatelessWidgetは「一度表示したら絶対に変わらない部品」ではありません。親から渡される値や依存する情報が変われば再構築されます。この例では、押した回数を自分で保持する部分にStateを使っています。

setStateは状態の変更を知らせて再構築を予定します。ネットワーク待ちなどをそのコールバック内で非同期に行うのではなく、必要な処理と状態変更を分けます。小さな画面で仕組みをつかんでから、複数画面へ状態を共有する方法へ進みましょう。

よくあるつまずき

• flutterが見つからない：SDKのPATH設定後、ターミナルを開き直したか確認します。
• Chromeが実行先にない：Chromeの導入と、公式のWeb開発向けの設定を確認します。
• 保存したのに画面が違う：変更したプロジェクトと実行中のプロジェクトが同じか確認し、必要なら停止して起動し直します。
• アプリ再起動で0になる：この例は永続保存していないためです。保存する機能は別に作ります。

次に学ぶなら

iOSの別の作り方ならSwift入門、データをサーバーへ送る仕組みならAPI開発入門へ進めます。iOSのビルドには対応するMac・Xcodeなど、AndroidにはAndroid SDKなどを準備してください。ストア公開は、署名・登録・審査を含む別の段階です。

参考資料

• Flutter：クイックスタート — SDK・VS Code・対象別の警告とWeb実行
• Flutter：MaterialApp — Material Designのアプリとhome
• Flutter：StatelessWidget — 状態を持たないWidgetと再構築
• Flutter：setState — 変更通知・同期コールバック・再構築
• Flutter：iOS環境 — Xcode・シミュレータ・実機の準備