Flutterスマホアプリの開発環境を整える｡普段PHP+Laravelの人が作りながら学ぶ体験記

前々からFlutter学びたい!と思いつつも､なかなか忙しくてやってられない状況でした｡振り返ってみると､2024年9月1日の記事でFlutterについて書いてるので､そのころからFlutter熱があったようです｡

年初の目標にもFlutterやると書いてるのですが､2025年も残すところあと3ヶ月にも関わらず､まだやっていませんでした(汗)｡

ですのでそろそろ取りかかっておこうと思います!

Flutter/Dart初心者による実録スマホアプリ開発シリーズとして､今後継続的に投稿していく予定です｡｢あーこんなコード書いてるんだw｣といった｢しくじり｣や｢試行錯誤｣も､恐れず記録として残していこうと思います｡

連載の最初として､本ページではまずは開発環境から構築していきます｡

悪いお手本にもなり得るので､初心者の方は､本連載のコードを参考にしないでくださいね｡Flutterスマのアプリ開発に興味あるけどまだやったことの無いような方は､一緒にやっていきましょう!

前提
Flutterの準備
Flutterプロジェクトを作成
Android Studioの初期設定
Laravelプロジェクトを作成
バーチャルホスト設定
終わりに

前提

作者について

普段はPHP+Laravelメイン
Web/PHP歴20年以上
Flutterは2022年頃に数ヶ月学ぶ→その後放置ですっかり忘れた｡

Lara

要はFlutter/Dartは初心者と思ってください｡今回はAIの力を借りて再挑戦です｡

今回作るもの

仕様はざっくりとですが､以下の様なイメージです｡というか気楽な感じでイメージしているので､作りながら面白そうな感じに適宜変えていきます｡

顧客管理アプリ
ログインしなくても使えるけど機能制限あり
ログインすればデータはクラウド(最初はローカル)に保存できるけど機能制限あり
有料ユーザー登録機能でフル機能利用可能
OS独自機能は持たせず､簡単で挫折しにくいものを目指す
ゆくゆくはWeb版も使えるようなイメージ

仮想的に､｢無料でも使えるけれど､有料ユーザーを増やして収益を得る｣ようなビジネスを想定しています｡

最初から高度な目標があると､挫折したり､つまらなくなって止めてしまう懸念があります(普段の業務が特に忙しくなると特に……→経験済み)｡

なので､ふわっとした緩い仕様で､簡単なものを楽しみながら作ることにします｡

開発環境

Windows11Pro 24H2
Android Studio
VS Code
Flutter/Dart(アプリ)
Apache+PHP+Laravel+MySQL(バックエンド)

バックエンドは普段使うLaravelを使い､ハードルを下げようと思います｡もしかしたら通知機能などでFirebaseとか必要になるのかもしれませんが､必要になった時考えます｡

LaravelとFlutterはAPI(Sanctum)で連携するのかなと考えています｡この辺はやってこなかった分野なので､Laravelの勉強もかねて良さそうかなと｡

途中までWindows11で開発するつもりですが､iOSのシミュレーターも使いたいです｡手持ちのMacは古すぎなので､適当なタイミングでMacも新調→移行予定です｡

Macを新調する言い訳にもなり､モチベーションに繋がりそうです｡

ディレクトリ構成

以下の様なディレクトリ構成にします｡

candy-project.jp/candy_app →flutterプロジェクト
candy-project.jp/candy-backend →laravelプロジェクト

最初Flutterプロジェクトもハイフン区切りで検討していたのですが､アンダースコアが標準なようで､Flutterのほうだけ変更しました｡

candyというプロジェクト名称は､何となく頭に浮かんだ単語=飴プロジェクトとしました(謎)｡

ご注意

冒頭でも書いた通り､Flutter/Dart初心者による実録スマホアプリ開発となりますので､お読みになる場合はそれを念頭に置いてください｡

時には冗長なコードや､間違ったことを書くかもしれません｡都度訂正なども加えていきますが､暖かい目で見ていただければ幸いです｡

Lara

さて､それでは思い立ったが吉日､開発開始です!本記事を書きながら同時進行で進めていきます｡

Flutterの準備

コードを書く前に､まずは開発環境から｡

Flutterはすでに入っているので､以下コマンドでバージョンを確認します｡(無い人は公式のクイックスタートからどうぞ)

flutter --version

結果は以下です｡

Flutter 3.29.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c236373904 (7 months ago) • 2025-03-13 16:17:06 -0400
Engine • revision 18b71d647a
Tools • Dart 3.7.2 • DevTools 2.42.3

分かりませんが､多分古いのでアップデートします｡

flutter upgrade

Android Studioを立ち上げた状態ではエラーになったので､いったん閉じてからPoserShellで｡ちょっと時間がかかりました｡

Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...
Building flutter tool...
Running pub upgrade...
Resolving dependencies... (2.0s)
Downloading packages... (4.3s)
Got dependencies.
Flutter is already up to date on channel stable
Flutter 3.35.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ac4e799d23 (6 days ago) • 2025-09-26 12:05:09 -0700
Engine • hash 0274ead41f6265309f36e9d74bc8c559becd5345 (revision d3d45dcf25) (6 days ago) • 2025-09-26 16:45:18.000Z
Tools • Dart 3.9.2 • DevTools 2.48.0

続いてflutter doctorでチェックします｡診断ツールみたいなやつだったと思います｡

flutter doctor

OKだったら✓が入ります｡

Downloading package sky_engine...                                  358ms
Downloading package flutter_gpu...                                 147ms
Downloading flutter_patched_sdk tools...                           268ms
Downloading flutter_patched_sdk_product tools...                   219ms
Downloading windows-x64 tools...                                 1,815ms
Downloading windows-x64/font-subset tools...                       163ms
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.35.5, on Microsoft Windows [Version 10.0.26100.6584], locale ja-JP)
[✓] Windows Version (11 Pro 64-bit, 24H2, 2009)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Chrome - develop for the web
[✗] Visual Studio - develop Windows apps
    ✗ Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.104.3)
[✓] VS Code, 64-bit edition (version unknown)
    ✗ Unable to determine VS Code version.
[✓] VS Code (version 1.92.0-insider)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.

2個チェックが入りませんでした｡

1つ目のAndroid licenses not acceptedはライセンスの同意ということらしく､以下コマンドを打ち込み､あとはひたすらyを連打して同意｡

flutter doctor --android-licenses

もう1つはVisual Studioが入っていないとのことですが､Android/iOS開発だけであれば無視して良さそうです｡

Flutterプロジェクトを作成

candy-project.jpでPoserShellを開き､Flutterプロジェクト(パッケージ?)を作ります｡

flutter create candy_app

あっという間に終わります｡

Creating project candy_app...
Resolving dependencies in `candy_app`...
Downloading packages...
Got dependencies in `candy_app`.
Wrote 130 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd candy_app
  $ flutter run

Your application code is in candy_app\lib\main.dart.

試しに実行してみます｡

cd candy_app
flutter run

途中で以下の様に聞かれます｡

[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)

ここでは2を入れて､無事起動できました｡

Android Studioの初期設定

すっかり使い方を忘れたAndroid Studioを設定します｡無い場合は公式からどうぞ｡

普通にソフトを開き､Openからcandy-project.jp/candy_appを選択して開きます｡

初回､警告が出ると思いますが､そのまま｢Trust Project｣を押して進めます｡

次にメニュー → File > Settings > Pluginsから､DartやFlutterがインストールされていることを確認します｡私の場合､入ってたのでとりあえずアップデートしておきました｡

次にメニューのTools→Device Managerより､エミュレーターデバイスを確認します｡

他に追加で入れてもいいですが､たしかやたら重かった記憶があるので､必要が生じるまではとりあえずこれを使います｡右端の再生ボタンを押して起動します｡

余裕が出たら､「小さい画面用（Pixel 5）」と「大画面用（Pixel 9 Pro XL）」等を作っても良いかもしれません｡

追記:
このエミュレーターはWebViewが使えない事が分かり､私の利用条件では使えないことがわかり､Pixel9 Proを追加で入れることにしました｡おおよそ2GB弱ほど追加で容量を要します｡

時間がかかるので､気長に待ちましょう｡以下が出たら完成です｡

次はこれでデモアプリを実行します｡

WindowsだとAlt + F12 ､MacだとOption + F12を押してターミナルを出し､flutter runで実行させます(凄く時間がかかります)｡

アプリが起動したらOK､次のステップに進めます｡

この最初からあるデフォルトアプリを編集する形で開発をしていくつもりです｡GitHubでソースコード管理もします｡

Laravelプロジェクトを作成

次に､バックエンドのLaravelプロジェクトを作成しておきます｡

candy-project.jpディレクトリをPoserShellで開き､以下のコマンドでcandy-backendにLaravelをインストールします｡

composer create-project --prefer-dist laravel/laravel candy-backend

今回は､すでにあるLaravel+Breezeのひな形を使いました｡usersとadmins(管理者用)のマルチ認証に対応しています｡以下を参考にしてください｡

ただ､Laravel12ではやや構造が変わっていておそらくそのままではできません｡このあたりは大筋から外れるので省きますが､機会があれば別で書きたいところです｡

Webからも使う想定ですので､BreezeはAPIモードではなく､通常のbladeモードでインストールしています｡

このプロジェクトはVSCodeでワークスペースとして設定し､GitHubでソースコード管理します｡

バーチャルホスト設定

本番っぽくやりたい&管理者用管理画面にWebからアクセスするためのバーチャルホストを設定します｡

ここではhttp://l.candy-project.jpとして作成することにしました｡

hostsファイルに追記します｡

127.0.0.1	l.candy-project.jp

そしてApacheのhttpd-vhosts.confに､Laravelのpublicディレクトリに対応するよう設定しておきます｡

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "D:\www\candy-project.jp\candy-backend\public"    
    ServerName l.candy-project.jp
</VirtualHost>

最近はあまりやる人も多くないのかもしれませんが､以下で書いてます｡Apacheを再起動して完了｡

終わりに

これで開発のスタートラインに立てた気がします｡

本来なら次は詳細な仕様の設計かなと思いますが､なんだかとにかくコード書いてみたくなっています｡なので勢いにのって､画面を作りつつやってもいいかもしれません｡

開発はやっぱり楽しくやるのが一番ですよね｡久々に普段と異なる作業になりそうで､ワクワクしてきます｡

今回は挫折せずにできるかな､と感じるところです｡しばらくは仕事が忙しくなりませんように(それはそれで困りますが)｡