flutter runは、作成したFlutterアプリをエミュレーター、実機、Chromeなどで起動するコマンドです。起動できない時は、コードより先にデバイス認識と開発環境を確認します。
この記事の結論
Flutter初心者は、最初から全部を覚えようとせず、目的を決める、環境を作る、小さく動かす、エラーを読む、画面を増やす、データを扱う、公開を学ぶ、という順番で進めると迷いにくくなります。
基本形
Flutterプロジェクトのルートで実行します。lib/main.dart以外を指定したい場合は、対象ファイルを明示できます。
cd my_first_app
flutter run
flutter run lib/main.dartデバイスを確認する
複数の端末がある場合は、先にflutter devicesでIDを確認します。Android Emulator、iPhone Simulator、Chromeなどが表示されることがあります。
flutter devices
flutter run -d chrome
flutter run -d emulator-5554実行中に使う操作
- r：ホットリロード
- R：ホットリスタート
- q：終了
- h：ヘルプ表示
起動しない時の切り分け
エラーが出たら、コードの問題か、環境の問題かを分けます。最初に見るべきなのはflutter doctor、flutter devices、エラー全文です。
flutter doctor
flutter devices
flutter clean
flutter pub get
flutter run -v最小確認用の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 const MaterialApp(
home: Scaffold(
body: Center(child: Text("Run OK")),
),
);
}
}よくあるつまずき
- 公式ドキュメントの手順を飛ばして、古い記事のコマンドだけをコピーしてしまう
- エラー全文を読まずに、最後の1行だけで判断してしまう
- Windows、macOS、Android、iOSの話を混ぜてしまい、どの環境の問題か分からなくなる
- 最初から大きなアプリを作ろうとして、動く最小単位を確認しない
次に読む記事
- flutter createの使い方｜新規プロジェクト作成とオプションの基本 — flutter createコマンドで新規Flutterプロジェクトを作る方法を解説します。プロジェクト名、保存場所、作成後の確認コマンドを整理します。
- FlutterをWindowsにインストールする方法｜Androidアプリを動かすまで — WindowsでFlutterをインストールし、Android Studio、Android SDK、エミュレーター、flutter doctorを確認して最小アプリを動かす手順を解説します。
- FlutterをMacにインストールする方法｜iOS・Androidを動かす準備 — MacでFlutterをインストールし、Xcode、Android Studio、iOS Simulator、flutter doctorを確認して最小アプリを動かす流れを解説します。
まとめ
まずはこの記事の完成条件だけを満たし、次の記事へ進む前にコマンド結果や画面表示を自分の環境で確認してください。Flutterは範囲が広いので、1記事につき1つの課題を解決して積み上げる方が、あとで戻って復習しやすくなります。