Flutterとは｜始め方・インストールとDartの基本を図と実例で解説

Flutter では、Dart で書いた画面（ウィジェット）をフレームワークとエンジンが描画し、同じコードが各 OS の上で動きます。

flowchart TD
    A[Dartで書いたコード<br>ウィジェット] --> B[Flutterフレームワーク<br>Dart]
    B --> C[Flutterエンジン<br>C++・Impeller]
    C --> D[Android<br>iOS]
    C --> E[Web]
    C --> F[Windows<br>macOS<br>Linux]

始めるときによく使う操作とコマンドです。

確認環境：Flutter 3.47.7（stable。2026年10月8日のコミット）と同梱の Dart 3.13.5。flutter create の雛形（main.dart・pubspec.yaml・テスト）、flutter doctor と flutter run が表示する文言、ウィジェットのクラス数と行数は、GitHub の flutter/flutter リポジトリの 3.47.7 タグのソースを読み、grep で数えて確かめました。プロジェクト名の判定は、flutter_tools の判定処理を Python 3.11.15 で同じ条件に書き写して実行しています。各版の公開時期は Git のタグで確かめました。インストール手順・対応 OS・ホットリロード・Impeller は docs.flutter.dev、Dart の文法とインストールは dart.dev、React Native は reactnative.dev、ストアの登録料は Apple と Google の公式ページで確かめました（確認日 2026年10月22日）。

Flutterとは（読み方・何ができるか・料金）

この節では、Flutter が何をするもので、何に使え、お金がかかるのかが分かります。

Flutter（フラッター）は、Google が開発しているオープンソースの UI フレームワークです。 1つのコードから、Android・iOS・Web・Windows・macOS・Linux のアプリを作れます。dart.dev は Flutter を「Dart の上に作られたマルチプラットフォームの UI ツールキット」と説明しています。

Flutterで作れるもの・作れる環境

docs.flutter.dev の「Supported deployment platforms」（Flutter 3.47 時点）では、次の OS と版が対象です。

iOS と macOS のアプリは、Mac と Xcode が無いとビルドできません。 Windows の PC では、Android・Web・Windows 向けまでを作れます。どの PC でどの検査が行われるかは、後の「flutter doctorの見方」で、Flutter 3.47.7 のソースをもとに整理しています。

Flutterは無料か（料金）

Flutter 自体は無料です。 ソースは BSD 3条項のライセンスで公開されていて、リポジトリの LICENSE は「Copyright 2014 The Flutter Authors」で始まります。Dart も同じく無料で使えます。お金がかかるのは、アプリをストアで配るときの登録料です。

iOS の実機での動作確認は、無料の Apple のアカウントでも行えます（docs.flutter.dev の iOS の手順に「A free personal Apple Developer account works for testing」とあります）。App Store で配るには有料の登録が要ります。

Flutterの版と更新の速さ

Flutter には stable（安定版）と beta などのチャンネルがあります。Git のタグで、最近の版を確かめました。

機能を足す版（3.44 → 3.47）はおよそ3か月ごとで、その間に不具合を直す版（3.47.1〜3.47.7）が出ています。CHANGELOG には「stable チャンネルは四半期ごとに機能の更新を行う」という方針が書かれています。Flutter 3.47.7 に同梱されている Dart は 3.13.5 でした（Flutter の DEPS に書かれた Dart のコミットが、dart-lang/sdk の 3.13.5 タグと一致）。

Dartとは（Flutterで使うプログラミング言語）

この節では、Flutter で書く言語 Dart の特徴と、Java・JavaScript との書き方の違いが分かります。

Dart（ダート）は、Google が開発しているプログラミング言語です。 dart.dev は「どのプラットフォームでも速いアプリを作るための、クライアント向けに最適化された言語」と説明しています。Flutter のアプリは、画面も処理もすべて Dart で書きます。

Dartの基本の書き方

dart.dev の「Introduction to Dart」のサンプルをもとにした、基本の書き方です。

// プログラムは main() から始まる
void main() {
  print('Hello, World!');

  var name = 'Voyager I';          // 型推論で String
  final year = 1977;               // 再代入しない変数
  String? nickname;                // ? を付けた型だけ null を持てる
  print(nickname?.length);         // null なら null のまま進む

  for (final planet in ['Jupiter', 'Saturn']) {
    print('$name flies by $planet'); // 文字列に変数を埋め込む
  }
}

// 関数
int fibonacci(int n) {
  if (n == 0 || n == 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// クラス（this.name でフィールドに代入するコンストラクタ）
class Spacecraft {
  String name;
  DateTime? launchDate;

  Spacecraft(this.name, this.launchDate);

  int? get launchYear => launchDate?.year;
}

// 非同期
Future<void> printWithDelay(String message) async {
  await Future.delayed(const Duration(seconds: 1));
  print(message);
}

Java か JavaScript を書いたことがあれば、多くはそのまま読めます。違いが出やすい点を表にしました。

null 安全の考え方は Kotlin とほぼ同じです。関連記事「Kotlin null安全の使い方｜?. ?: !! letの違い早見表」で扱っています。async/await の流れは JavaScript と同じ形で、関連記事「JavaScriptのasync/awaitの使い方｜エラー処理と並列実行」で扱っています。

雛形のコードにある「.center」の正体（ドットの省略記法）

Flutter 3.47.7 の flutter create の雛形には、mainAxisAlignment: .center や colorScheme: .fromSeed(...) のように、ドットで始まる書き方があります。これは Dart のドットの省略記法（dot shorthands）で、型が文脈から分かるときに型名を省けます。

// 省略しない書き方
mainAxisAlignment: MainAxisAlignment.center,
// 省略記法（Dart の言語の版 3.10 以上）
mainAxisAlignment: .center,

dart.dev には「Dot shorthands require a language version of at least 3.10」とあります。Web で見つかる以前の版の解説には MainAxisAlignment.center と書かれていることが多く、どちらも同じ意味です。

Dartだけを入れる・ブラウザで試す

Flutter の SDK には Dart の SDK が丸ごと入っています（dart.dev：「it includes the full Dart SDK」）。Flutter を入れれば、Dart を別に入れる手間はかかりません。Dart だけを使いたいときの入れ方は次のとおりです。

Flutterの仕組み（ウィジェット・エンジン・描画）

この節では、なぜ1つのコードが6つの OS で動くのかが、3つの層で分かります。

docs.flutter.dev の「Flutter architectural overview」は、Flutter を3つの層に分けて説明しています。

flowchart TD
    F[フレームワーク Dart<br>Material・Cupertino・widgets・rendering] --> E[エンジン C++<br>描画・文字の配置・Dart の実行環境]
    E --> M[エンベッダー<br>OS ごとの入口]
    M --> O[OS<br>画面・入力・アクセシビリティ]

Flutter は、ボタンなどの部品を OS から借りずに、自前で描きます。 公式の説明では「Flutter has its own implementations of each UI control」とあり、その理由として、拡張しやすいこと、Flutter と OS の間を行き来せずに画面全体をまとめて描けること、OS の版に見た目が左右されないことを挙げています。地図など自前で作るのが難しいものは、OS の部品を埋め込む Platform View で使います。

描画エンジン Impeller と OS ごとの状況

docs.flutter.dev の「Impeller rendering engine」のページによる、2026年10月22日時点の状況です。

フレームワークの中もウィジェットでできている

Flutter 3.47.7 のフレームワーク（packages/flutter/lib）のソースを数えました。

いちばん大きいのは Material デザインの部品（198ファイル・210,800行）で、次が土台の widgets（186ファイル・158,059行）です。

よく使う Container も、中身は小さなウィジェットの組み合わせでした。Container は StatelessWidget で、build の中で、指定された項目に応じて Align・Padding・ColoredBox・DecoratedBox・ConstrainedBox・Transform で順に包んでいます（container.dart より、一部を抜粋）。

// packages/flutter/lib/src/widgets/container.dart（3.47.7）の build から抜粋
Widget? current = child;
if (alignment != null) {
  current = Align(alignment: alignment!, child: current);
}
final EdgeInsetsGeometry? effectivePadding = _paddingIncludingDecoration;
if (effectivePadding != null) {
  current = Padding(padding: effectivePadding, child: current);
}
if (color != null) {
  current = ColoredBox(color: color!, isAntiAlias: isAntiAlias, child: current);
}
// …decoration・constraints・margin・transform も同じように包む
return current!;

Center は Align を継承し、Column と Row は Flex を継承していました。「Flutter ではほとんどすべてがウィジェット」という説明は、フレームワークの中身にもそのまま当てはまります。 アプリのコードとフレームワークのコードは、同じ Dart・同じ仕組みで書かれています。

ウィジェット・エレメント・レンダーオブジェクトの3つの木

画面は3つの木（ツリー）で管理されます（architectural overview より）。

ウィジェットを毎回作り直しても速い理由は、エレメントの木が前回との差を見て、変わったところだけをレンダーオブジェクトに反映するためです。公式は build() を「状態を UI に変える関数（UI = f(state)）」と説明しています。

StatelessWidgetとStatefulWidgetの違い

この節では、2種類のウィジェットの違いと、setState で画面が変わる流れが分かります。

公式の「Introduction to widgets」は、2つを分けている理由を「ウィジェットは今の状態を表すための一時的なオブジェクトで、State は build() の呼び出しをまたいで情報を覚えておける」と説明しています。

雛形のカウンターアプリで見る

flutter create で作られる lib/main.dart は、ボタンを押すと数が増えるアプリです。Flutter 3.47.7 の雛形（main.dart.tmpl）から、英語のコメントを除いて載せます。

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: .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: .center,
          children: [
            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),
      ),
    );
  }
}

MyApp は設定を渡すだけなので StatelessWidget、数を覚える MyHomePage は StatefulWidget です。数そのもの（_counter）は State の側にあります。widget.title は、State から親の StatefulWidget の値を読む書き方です。

ボタンを押してから画面が変わるまでの流れは次のとおりです。

flowchart TD
    A[＋ボタンを押す] --> B[_incrementCounter]
    B --> C[setState の中で<br>_counter を1増やす]
    C --> D[Flutter が build を<br>もう一度呼ぶ]
    D --> E[変わった Text だけ<br>描き直す]

雛形のコメントには、setState() を呼ばずに _counter を変えると build が呼ばれず、画面に何も起きない、と書かれています。値を変えるときは setState の中で変えるのが決まりです。

React を書いたことがあれば、setState は useState の更新関数に近い役割です。関連記事「React useStateの使い方｜配列・オブジェクト更新と更新されない原因」で扱っています。

ホットリロードとホットリスタートの違い

この節では、コードの変更をすぐ画面に出す3つの方法と、使い分けが分かります。

公式のドキュメントによると、ホットリロードとホットリスタートは debug モードで動かしているときだけ使えます。Web も、ホットリスタートとホットリロードに対応しています。

ホットリロードでは反映されず、ホットリスタートかフルリスタートが要る変更です（docs.flutter.dev「Hot reload」より）。

flutter runのキー操作（原文）

flutter run で起動した端末では、キーを1つ押して操作します。Flutter 3.47.7 の flutter_tools のソース（command_help.dart）にある説明文です。

r を押すと、ソースの中では「Performing hot reload...」と表示したあと、Reloaded （読み込んだ数） of （全体の数） libraries の形で結果を出します。R では「Performing hot restart...」のあと「Restarted application in （時間）.」と出ます。

Flutterの始め方：必要なものを確かめる

この節では、作りたいアプリごとに、何を入れればよいかが分かります。

Flutter の SDK とエディターは共通で、作りたいアプリの種類ごとに追加の道具を入れます。

最初の1本は Web（Chrome）で動かすと、Android Studio や Xcode を入れる前に試せます。 公式の Quick start も、Chrome で動かす手順で書かれています。

• 1Git が入っているWindows は Git for Windows、Mac は xcode-select --install で入る
• 2VS Code（または Android Studio）が入っている公式の推奨は VS Code と Flutter 拡張の組み合わせ
• 3SDK を置くフォルダを決めた空白・特殊な文字を含まず、管理者の権限が要らない場所（例：ユーザーのフォルダの下の develop）
• 4作りたい OS の道具を決めた上の表。iOS は Mac が要る

Flutterのインストール（Windows・Mac）

この節では、公式の2つの入れ方（VS Code から・手動）を、Windows と Mac で順に追えます。

docs.flutter.dev の Install のページは、「Quick start」（推奨）と「Custom setup」の2つの道を用意しています。

VS Codeから入れる（Windows・Mac共通）

公式のページには、VS Code が Android Studio が無いと警告を出すことがあり、Web・iOS・macOS 向けだけなら無視してよい、と書かれています。

Windowsで手動で入れる

公式の手順（3.47.5 の例）では、zip を %USERPROFILE%\develop に展開します。

Expand-Archive `
  -Path "$env:USERPROFILE\Downloads\flutter_windows_3.47.5-stable.zip" `
  -DestinationPath "$env:USERPROFILE\develop"

コマンドプロンプトなら tar で展開できます。

tar -xf "%USERPROFILE%\Downloads\flutter_windows_3.47.5-stable.zip" -C "%USERPROFILE%\develop"

続けて、環境変数のユーザー変数 Path に %USERPROFILE%\develop\flutter\bin を足し、「上へ移動」でいちばん上に置きます。端末を開き直して、次の2つが動けば完了です。

flutter --version
dart --version

公式のページには、展開した bin フォルダに flutter.bat が無いときは、ウイルス対策ソフトが隔離した可能性があるので、SDK のフォルダを信頼する設定にしてから展開し直す、とあります。

Macで手動で入れる

Mac は、Apple メニューの「この Mac について」でチップ（Apple シリコンか Intel か）を確かめ、合う zip を選びます。公式のページには、Intel の Mac のサポートを終えていく予定で、今後の版は Apple シリコンが必要になると書かれています。

xcode-select --install
unzip ~/Downloads/flutter_macos_3.47.5-stable.zip -d ~/develop/

Mac の標準のシェルは zsh です。~/.zprofile の末尾に次の1行を足し、端末を開き直します。

export PATH="$HOME/develop/flutter/bin:$PATH"

~/.zprofile はログインのときに読まれる設定ファイルなので、書き足した後は端末を開き直すまで反映されません。

AndroidとiOSの準備

Android（Windows・Mac・Linux）：Android Studio を入れ、SDK Manager で次を選んで Apply します。そのあとライセンスに同意します。

$ flutter doctor --android-licenses

公式のページでは、同意が終わると「All SDK package licenses accepted.」と出ます。エミュレーターは Android Studio の Device Manager で作ります。

iOS（Mac だけ）：Xcode を入れたあと、次のコマンドを順に実行し、CocoaPods を入れます（docs.flutter.dev の手順のまま）。

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
sudo xcodebuild -license
xcodebuild -downloadPlatform iOS
open -a Simulator   # Xcode 27 では open -a DeviceHub（名前が変わった）

Windows のデスクトップ：Visual Studio（VS Code とは別のもの）を入れ、「Desktop development with C++」のワークロードを選びます。コマンドで入れるときの ID は Microsoft.VisualStudio.Workload.NativeDesktop です。

flutter doctorの見方

この節では、flutter doctor の記号の意味と、どの項目を直せばよいかが分かります。

flutter doctor は、Flutter で開発するための道具がそろっているかを検査するコマンドです。 行の先頭の記号で結果を表します。Flutter 3.47.7 のソース（doctor_validator.dart）にある記号の定義です。

最後の1行は、問題が無ければ「• No issues found!」、あれば「! Doctor found issues in 2 categories.」のように、問題のあった項目の数が出ます。詳しく見るときは flutter doctor -v です（-v を付けないときは、最初に「Doctor summary (to see all details, run flutter doctor -v):」と出ます）。

PCのOSで検査項目が変わる

3.47.7 のソースでは、検査する項目と順番が次のように決まっています。使っている PC で作れないアプリの項目は、そもそも表示されません。

環境変数 HTTP_PROXY が設定されていると「Proxy Configuration」も加わります。以前の版の解説によくある「Android Studio」「VS Code」の行は、3.47.7 のソースの検査項目には含まれていません。 画面が解説記事と違っても、上の項目が [✓] なら開発は始められます。

Flutter の行のかっこ内は、ソースでは Channel stable, 3.47.7, on （OS の名前と版）, locale ja-JP の形で、チャンネル・版・OS・言語の設定を表示します。

doctorでよく出る表示（原文）

docs.flutter.dev のトラブルシューティングに載っている表示です。Android のコマンドラインツールが無いとき：

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at C:\Users\My PC\AppData\Local\Android\sdk
    X cmdline-tools component is missing

Android のライセンスに同意していないとき：

[!] Android toolchain - develop for Android devices
    ! Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.

[!] や [✗] があっても、作らないアプリの項目なら放っておけます。 たとえば Web だけを作るなら、Android toolchain が [✗] でも Chrome が [✓] なら flutter run -d chrome で動かせます。それぞれの直し方は「Flutterのよくあるエラーと直し方」の表にまとめています。

最初のアプリを作る（flutter create・プロジェクト構成）

この節では、プロジェクトの作り方、名前の決まり、作られるフォルダの役割が分かります。

flutter create my_app       # カウンターアプリの雛形で作る
cd my_app
flutter run -d chrome       # Chrome で動かす（端末は flutter devices で確かめる）

--org は公開するアプリなら自分のドメインを逆にしたもの（例：jp.co.example）にします。後から変えると、Android と iOS の設定を何か所も直すことになります。

プロジェクト名の決まり（判定を再現）

プロジェクト名は Dart のパッケージ名として使われるため、英小文字・数字・_ だけで、数字で始まらず、予約語でない名前にします。flutter_tools の判定処理（create_base.dart の正規表現 [a-z_][a-z0-9_]* と予約語の一覧、flutter などとの重複の確認）を Python で同じ条件に書き写し、9つの名前を判定しました。

my_app       OK
todo_app2    OK
My-App       NG  "My-App" is not a valid Dart package name. Try "my_app" instead.
my-app       NG  "my-app" is not a valid Dart package name. Try "my_app" instead.
2048_game    NG  "2048_game" is not a valid Dart package name. Try "_2048_game" instead.
class        NG  "class" is not a valid Dart package name.
flutter      NG  Invalid project name: 'flutter' - this will conflict with Flutter package dependencies.
myApp        NG  "myApp" is not a valid Dart package name. Try "myapp" instead.
マイアプリ    NG  "マイアプリ" is not a valid Dart package name.

ハイフン（-）と大文字は使えません。 ソースでは、使えない名前のときに、小文字にしてハイフンを _ に変えた候補（Try "my_app" instead.）を出します。フォルダ名を別にしたいときは、flutter create --project-name my_app MyFolder のように名前を分けて指定できます。

作られるフォルダとファイル

Flutter 3.47.7 の雛形（packages/flutter_tools/templates/app など）から作られる主なものです。ファイル数は、雛形のフォルダにあるファイルを数えた値です。

ふだん書き換えるのは lib/・test/・pubspec.yaml の3つです。OS ごとのフォルダは、アプリの名前・アイコン・権限などを設定するときに触ります。flutter pub get のあとには、pubspec.lock と .dart_tool/ もできます（.gitignore の雛形では .dart_tool/ と /build/ を Git の管理から外しています）。

pubspec.yaml の雛形（コメントを除く）です。sdk: の行には、ソースでは ^ と使っている Dart の版が入ります（Flutter 3.47.7 なら Dart 3.13.5）。

name: my_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ^3.13.5

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

flutter:
  uses-material-design: true

version: 1.0.0+1 の +1 はビルド番号です（雛形のコメントでは、Android の versionCode に使われると説明しています）。パッケージは flutter pub add 名前 で dependencies に足され、pub.dev から取得されます。テストの雛形は、画面に「0」があり、＋を押すと「1」になることを testWidgets で確かめる内容で、flutter test で実行します。

エディターの設定（保存時の整形など）は、関連記事「VS Code settings.jsonおすすめ設定｜コピペ用全文と各項目解説」で扱っています。

Flutterのよく使うコマンド一覧

この節では、開発の各場面で使う flutter コマンドを引けます（docs.flutter.dev「flutter CLI」より）。

React Native・Swift・Kotlinとの違い

この節では、Flutter と、ほかのアプリの作り方の違いを、公式のドキュメントにある事実で比べます。

React Native のドキュメントは、React Native のコンポーネントは「実行時に、対応する Android と iOS のビューを作る」と説明しています。Flutter のドキュメントは、React Native との違いを「RN はネイティブのウィジェットに変換し、Flutter はネイティブのコードまでコンパイルする」と説明しています。React Native の仕組み・Expo での始め方・コンポーネントの書き方は、関連記事「React Nativeとは｜始め方・環境構築・Expoとの違いを実例で解説」で扱っています。

迷ったときの判断表

Kotlin Multiplatform の書き方は、関連記事「Kotlin Multiplatform入門｜共通コードとexpect/actual」で扱っています。

Flutterのよくあるエラーと直し方

この節では、インストールから最初の実行までに出るエラーの原文と、原因・直し方を引けます。原文は docs.flutter.dev のトラブルシューティングと、Flutter 3.47.7 のソースから取りました。

ホットリロードが拒否されたとき

保存したコードにコンパイルエラーがあると、ホットリロードは行われず、Hot reload was rejected: に続いてエラーの場所が出ます（公式の例：error: line 33 pos 5: unbalanced ')'）。表示された行を直して保存し直すと、ホットリロードが続けられます。

Flutterの学び方（次の一歩）

この節では、インストールのあとに何をどの順で学ぶとよいかが分かります。

公式の docs.flutter.dev には、初めて学ぶ人向けの「Learn Flutter」の順路と、Dart の「Introduction to Dart」があります。

よくある質問

Q. Flutterとは何ですか？ A. Google が開発している、1つの Dart のコードで Android・iOS・Web・Windows・macOS・Linux のアプリを作れる UI フレームワークです。画面の部品は OS のものを使わず、Flutter が自前で描きます。「Flutterの仕組み」の節で図にしています。

Q. Flutterの読み方は？ Dartは？ A. Flutter は「フラッター」、Dart は「ダート」と読みます。

Q. Flutterは無料ですか？ A. 無料です（BSD 3条項のライセンス）。費用がかかるのはストアの登録料で、2026年10月22日時点で Google Play は1回限り US$25、Apple Developer Program は年 US$99 です。

Q. Dartとは何ですか？ Flutterとの関係は？ A. Dart は Google のプログラミング言語で、Flutter のアプリはすべて Dart で書きます。Flutter の SDK には Dart の SDK が丸ごと入っているので、別に入れる手間はかかりません。

Q. FlutterとReact Nativeはどちらを選べばいいですか？ A. 画面の見た目を OS をまたいでそろえたい、Web やデスクトップも出したいなら Flutter、チームが React と TypeScript に慣れているなら React Native が始めやすい選択です。「迷ったときの判断表」にまとめています。

Q. WindowsのPCでiPhoneのアプリは作れますか？ A. iOS のアプリのビルドには Mac と Xcode が要ります。Windows では Android・Web・Windows 向けのアプリを作れます。

Q. Android Studioは必ず入れる必要がありますか？ A. Android 向けのアプリを作るときは、Android SDK を入れるために使います。Web・iOS・macOS 向けだけなら、VS Code だけで始められます。

Q. flutter doctorで[!]が出たままです。 A. 作らないアプリの項目なら、そのままでも開発できます。作りたい OS の項目（Android なら Android toolchain、Web なら Chrome）が [✓] かを見ます。直し方は「よくあるエラーと直し方」の表にあります。

Q. StatelessWidgetとStatefulWidgetの違いは？ A. StatelessWidget は受け取った値を表示するだけのウィジェット、StatefulWidget は State オブジェクトに値を覚えさせ、setState で画面を描き直すウィジェットです。

Q. ホットリロードとホットリスタートの違いは？ A. ホットリロード（r）は状態を残したまま変更を反映し、ホットリスタート（R）は状態を消してアプリを最初から動かし直します。main() や initState() の変更はホットリスタートで反映します。

Q. Flutterはオワコンですか？ 将来性は？ A. 事実として、Flutter は2026年も約3か月ごとに機能を足す stable 版（5月に 3.44、8月に 3.47）を出しており、10月には 3.50 の beta が出ています。3.47 では macOS・Windows・Linux の描画も Impeller が既定になりました。

まとめ

• Flutter は、1つの Dart のコードで6つの OS のアプリを作れる、Google の無料の UI フレームワーク。2026年10月22日時点の stable は 3.47.7（Dart 3.13.5 を同梱）。
• 部品は OS から借りずに自前で描く。フレームワーク（Dart）・エンジン（C++・Impeller）・エンベッダー（OS ごと）の3層でできている。
• 画面はウィジェットの組み合わせ。表示だけなら StatelessWidget、値が変わるなら StatefulWidget と setState。
• ホットリロード（r）は状態を残して反映、ホットリスタート（R）は最初から。main()・initState() の変更は R。
• 入れ方は VS Code の「Flutter: New Project」が推奨。手動なら zip を展開して flutter/bin を PATH に足す。iOS は Mac と Xcode が要る。
• flutter doctor は PC の OS で検査項目が変わる。作りたいアプリの項目が [✓] なら始められる。
• プロジェクト名は英小文字・数字・_ だけ。ハイフンと大文字は使えない。

参考・出典

確認日はいずれも 2026年10月22日です。

• Flutter「Install Flutter」：https://docs.flutter.dev/install
• Flutter「Quick start」：https://docs.flutter.dev/install/quick
• Flutter「Install manually」：https://docs.flutter.dev/install/manual
• Flutter「Installation troubleshooting」：https://docs.flutter.dev/install/troubleshoot
• Flutter「Supported deployment platforms」：https://docs.flutter.dev/reference/supported-platforms
• Flutter「Flutter architectural overview」：https://docs.flutter.dev/resources/architectural-overview
• Flutter「Impeller rendering engine」：https://docs.flutter.dev/perf/impeller
• Flutter「Introduction to widgets」：https://docs.flutter.dev/ui/widgets-intro
• Flutter「Hot reload」：https://docs.flutter.dev/tools/hot-reload
• Flutter「flutter: The Flutter command-line tool」：https://docs.flutter.dev/reference/flutter-cli
• Flutter「Set up Android development」：https://docs.flutter.dev/platform-integration/android/setup
• Flutter「Set up iOS development」：https://docs.flutter.dev/platform-integration/ios/setup
• Flutter「Set up Windows development」：https://docs.flutter.dev/platform-integration/windows/setup
• Flutter「Flutter for React Native developers」：https://docs.flutter.dev/get-started/flutter-for/react-native-devs
• flutter/flutter（GitHub、3.47.7 タグ・CHANGELOG・LICENSE）：https://github.com/flutter/flutter
• Dart「Dart overview」：https://dart.dev/overview
• Dart「Introduction to Dart」：https://dart.dev/language
• Dart「Dot shorthands」：https://dart.dev/language/dot-shorthands
• Dart「Get the Dart SDK」：https://dart.dev/get-dart
• React Native「Core Components and Native Components」：https://reactnative.dev/docs/intro-react-native-components
• React Native「Get Started with React Native」：https://reactnative.dev/docs/environment-setup
• React Native「Using TypeScript」：https://reactnative.dev/docs/typescript
• React Native「Fast Refresh」：https://reactnative.dev/docs/fast-refresh
• Android Developers「Jetpack Compose」：https://developer.android.com/compose
• Apple Developer「SwiftUI」：https://developer.apple.com/jp/swiftui/
• Apple Developer「メンバーシップの登録」：https://developer.apple.com/jp/help/account/membership/program-enrollment/
• Play Console ヘルプ「Play Console に登録する」：https://support.google.com/googleplay/android-developer/answer/6112435?hl=ja

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。