こちらはモバイルアプリ開発に興味のある方や、ある程度プログラミング経験を持っている中級者向けの記事となっています。
プログラミング初心者の方にはPythonをおすすめしています↓
全ての手順を画像付きでわかりやすく説明しています。
安心して進めてみてください～
HATOBAこんにちは。この記事を書いたHATOBA(はとば)です。
- 国公立大 情報通信学科卒
- 開発経験5年以上のエンジニア(おもにJava)
- モバイルアプリ開発を勉強中
【PR】ゼロから学ぶFlutterアプリ開発(Kindle版)
まずはFlutterについてざっくりと理解しよう
Flutterは、Googleが開発したUIツールキットで、モバイルアプリを
効率的に作成するための強力なフレームワークです。
ReactNativeと同様にクロスプラットフォーム開発が可能で、
iOSとAndroidの両方に対応したモバイルアプリ、ウェブ、
デスクトップアプリを一つのコードベースで作成できるのが特徴です。
HATOBAAIにコード書かせてアプリをリリースしました、収益化に成功しました
みたいな話を最近よく聞くので、俺もマネしてみたくなったんですよね～ それで始めてみました。
Reactと異なるポイントとしては、ReactがJavaScriptで動くのに対し
Flutterは「Dart」というGoogle独自のプログラミング言語を使用している点です。
HATOBA文法的にはJavaやC++と共通する部分が多いので、ある程度オブジェクト指向プログラミングの経験があればすぐ習得できそうです。
また、ホットリロード機能により、リアルタイムでアプリの変更を確認できるため、
開発者は迅速にプロトタイプを作成し、ユーザーからのフィードバックを得ることができます。
Flutterは、特に美しいUIを簡単に作成できる点が評価されています。
豊富なウィジェットが用意されており、カスタマイズ性が高い点も魅力です。
開発環境を構築しよう！(所要時間：1.5時間程度)
それでは以下の5ステップでFlutterの開発環境を構築していきましょう。
順調にいけば、1時間半ぐらいでサンプルアプリの作成までいけると思います。
- Flutter SDKのインストール
- コマンドで依存性を確認
- Android toolchainのインストール
- Visual Studio(無償版)のインストール
- VSCodeのインストール
ただし本手順には以下の前提がありますので、一度確認してください！
- このインストール手順で使用しているOSはWindows11です
※MacやLinuxでも同様の環境作れるはずですが、細かい手順の異なる部分があると思います。 - ドライブの空き容量が40～50GB程度必要、それなりにスペースを要します
- ローカルでお試しする分には無料、お金はかからないです
※自分の作ったものをアプリストアへリリースする段階で資金が必要になります - Visual Studio 無償版のインストールにMicrosoftアカウントが必要なので、事前に用意してください
※下のボタンからGoogle検索できます。
HATOBAでは1つずつ説明していきますね～
STEP①：Flutter SDKのインストール
はじめにFlutter SDKをインストールしますが、手順はこちらの記事を参考にしてください↓
HATOBAインストールが終わったらSTEP②に進みましょう！
STEP②：コマンドで依存性を確認
次に、セットアップの完了に必要な依存性を一度確認しましょう。
以下のコマンドでその確認ができます↓
flutter doctorコマンド実行例
- [✓] ： 設定が完了している
- [!] ： インストール必須ではないが、未設定の状態
- [✗] ： 設定が未完了
コマンドで確認した結果、「Android toolchain」と「Visual Studio」のセットアップが不完全だとわかりました。
※記号がすでに [✓] (設定完了)となっていた場合、セットアップ不要ですので手順をスキップしてください。
HATOBAこれらのセットアップ方法はSTEP③～④で説明します。
STEP③：Android toolchainのインストール
「flutter doctor」コマンドで確認したところ、「Android toolchain」が足りないということが分かりましたね。
※flutter doctorコマンドの結果が「設定完了済み」だった場合はインストール不要です。
HATOBAAndroid toolchainのインストール手順はこちらの記事を参考にしてください↓
STEP④：Visual Studio(無償版)のインストール
また、Android toolchainのほかにVisual Studioも足りていませんので、インストールが必要となります。
※flutter doctorコマンドの結果が「設定完了済み」だった場合はインストール不要です。
HATOBAVisual Studio(無償版)のインストール手順はこちらの記事を参考にしてください↓
STEP⑤：VSCodeのインストール
最後にFlutter開発のコーディングやプロジェクト実行を行うためにVSCodeを導入しましょう！
※すでにインストール済みの場合は不要です
HATOBAVSCodeのインストール手順はこちらの記事を参考にしてください↓
サンプルアプリの作成・実行方法
環境構築おつかれさまでした！
これでようやくスタートラインに立てましたね。
HATOBA最後に以下の手順で、サンプルアプリを作成して実行してみましょう
サンプルアプリの作成方法
まず、任意の場所にflutterプロジェクトを配置するフォルダを作成しましょう
※以下では例として、
というフォルダを作成して進めています。
コマンドラインを開き、先ほど作ったフォルダに移動します
以下のflutterコマンドを実行すると、初期状態のサンプルプロジェクトを作成できます↓
flutter create test
VSCodeの「フォルダーを開く」をクリックし、コマンドで作成したtestプロジェクトのフォルダを開いてください
“main.dart” ファイルは libフォルダに入ってるのでこれを開いてください
ソース上のvoid main() 関数付近にある「Run」をクリックすると、作成したプロジェクトを実行できます
アプリケーションのビルドにしばらく時間かかりますが、待機するとChrome上でアプリが実行されると思います
※右下の＋を押すと、中央の数字を1ずつカウントするという単純なアプリケーションになってます↓
それから補足ですが、VSCodeの画面の右下に”Windows”と書いてあると思います
この状態で「Run」を行うと、Windowsのデスクトップアプリケーションとしてビルド実行を行うという意味です
クリックすると実行対象をAndroidエミュレーターに切り替えて、Android向けのビルドを実行できたりするので、動作を適当に試してみて下さい。
HATOBAサンプルアプリのコード解説記事も用意してますので、もう一歩踏み込みたい方はこちらもぜひ参考にしてください！
[PR] Flutter実践開発 ── iPhone／Android両対応アプリ開発のテクニック WEB+DB PRESS plus (Kindle版)
まとめ
サンプルアプリ実行までたどり着いた方、おつかれさまでした。
また、ここまで読んでくれてありがとうございます。
繰り返しになりますが、本記事の内容は以下の通りでした。
補足
サンプルだけで終わってしまうのはつまらないので、ChatGPTにToDoアプリを作らせた話も記事にまとめてます。
HATOBA次の学習ステップとして、こういうのもぜひ試してみてください！
コメント