【2023】Flutter学習ロードマップ!初心者向け勉強法を0から解説!

Flutterでアプリ開発をしたい!
けど、ベストなFlutterの学習方法や進め方が分からない。

Flutterの学習方法・進め方を知ることは重要です。Flutterの学習方法を間違えると、やみくもに進め、オリジナルアプリ開発まで辿りつかずに挫折してしまうことがよくあります。

そこで、今回は3か月でオリジナルアプリ開発ができるFlutterの学習ロードマップを解説します。

先に結論からお伝えします。

Flutterの学習ロードマップは以下の通りです。

  • 1か月目 基礎を学ぶ(Dart基本文法、ウィジェット、画面遷移、状態管理など)
  • 2か月目 応用を学ぶ(ライブライリ、バックエンド、広告設定など)
  • 3か月目 オリジナルアプリ開発(スモールスタート)
やきいも

挫折を防ぐポイント
・完璧を目指さずに1本目アプリを早くリリースする
・自分の学習サイクルを習慣化する

プログラミングは暗記科目ではありません。すべてを暗記するのは無理です。辞書を読む感覚でWebサイト・書籍を参考に進めることが大事!

この記事で分かること!
  • 初心者にオススメな学習方法
  • 初心者にオススメしない学習方法
  • 挫折しない学習ロードマップ
  • Flutter習得が早くできる人

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

Flutter・Dart言語の初心者にオススメな学習方法3選!

初心者にオススメできるFlutter・Dart言語の学習方法は以下の3つです。

学習方法費用挫折の可能性
Udemy約 1,500円〜低い
プログラミングスクール約25,000円〜かなり低い
書籍約 2,000円〜高い

上記の学習方法の中から、以下の3つのポイントで解説します。

  • 獲得できるレベル
  • 挫折する可能性
  • どんな人におすすめ

Udemyの動画教材から学習

1つ目のオススメの学習方法はUdemyです。Udemyについてはコチラの記事で詳しく解説してます。

獲得できるレベル
  • Flutterのイメージを掴むことができる。
  • 基本的な文法やFlutterの構造を習得できる。
  • オリジナルアプリの作成できる。

Udemyの選択するコース次第では、挫折する可能性はかなり低いです。なぜなら、1つのコース上で1本の動画時間は3分~10分と短めなため、疲れている日も3分だけ学習することもできます。Udemyは継続した学習が続けやすく、モチベーション維持がしやすいのが良い点です。

セール時は価格も約1,500円と安く、メリットの多いUdemyですがもちろんデメリットもあります。低品質なコースを選ぶと説明通りにプログラミングしても動かずエラーが頻繫に出ます。結局、エラー対応で調べる頻度が増えて、挫折する可能性は一気に上がります。

低品質なコースを選ばないためには「更新年月が新しい」「受講者が多い」コースがオススメです。受講者が多いコースを選ぶ理由は、同コースのQAノウハウが溜まっているからです。Flutterのオススメコースを知りたい方はコチラで詳しく解説してます。

どんな人にオススメ?
  • 理論よりも実際に早く手を動かし、習うより慣れろタイプの方
  • Flutter、Dartをすぐに体験したい方
  • コピペでも良いから早くオリジナルアプリを作りたい方

選択したコースによっては、1~2時間で簡単なメモアプリも作成できます。

プログラミングスクールで学習

2つ目のオススメの学習方法はプログラミングスクールです。

獲得できるレベル
  • 基本的な文法やFlutterの構造を習得できる。
  • オリジナルアプリの作成できる。
  • ポートフォリオの作成ができる。

プログラミングスクールの学習方法は、挫折する可能性はかなり低いです。なぜなら、不明点は講師に質問ができるため1人でやみくもに調べる時間も減ります。学習カリキュラムもスクールの提示コースに沿って学ぶため効率よく学習できるからです。

デメリットは、学習に掛かる費用が高い点です。ただ、年間の専門学校や大学の費用と比較すると高額とは言えません。Flutterを学べる3つのプログラミングスクールについてはコチラの記事で詳しく解説してます。最速でFlutterエンジニアになりたい方は最終手段としてアリです!

どんな人にオススメ?
  • プログラミング未経験の方
  • 最短で習得したい方
  • 自己投資の資金に余裕のある方
  • 本やUdemyで挫折した方
  • Flutterエンジニアとして就職、転職したい方

本で学習

3つ目のおすすめの学習方法は書籍です。

獲得できるレベル
  • Flutterのイメージを掴むことができる。
  • 基本的な文法やFlutterの構造を習得できる。
  • オリジナルアプリの作成できる。

書籍での学習方法は、挫折する可能性は高いです。なぜなら、Flutterの最新バージョンに追いついていない書籍が多いためです。書籍通りにコーディングしても結局動かず、自身で日々調べていく内に全然前に進まず挫折する傾向にあります。Flutterの書籍をお探しの方はコチラで詳しく解説してます。

デメリットばかりではもちろんないです。書籍の学習は理論を網羅的に学ぶことができるのが良い点!

理論をしっかり把握しないと、応用が効かずコピペコードで何となく動いたとなってしまいますので、1冊は基礎的な書籍に目を通しておくことをオススメします。Flutterの日本語書籍は少ないのが現状で、入門書であっても意外と中級者向けの内容もありますので要注意。初心者におすすめのFlutter書籍はコチラで詳しく解説してます。

どんな人にオススメ?
  • Flutter、Dartの理論を一つ一つしっかり学びたい方
  • エラー対応に強く、自身で調べ解決する力がある方

Flutter・Dart言語の初心者にオススメしない2つの学習方法

初心者にオススメできないFlutter・Dart言語の学習方法は以下の2つです。費用は0円ですが、デメリットとして効率よく学習できず、挫折する可能性はかなり高いのが特徴です。

学習方法費用挫折の可能性
Youtube・Webサイト0円かなり高い
公式サイト0円高い

Youtube・Webサイト

1つ目の初心者にオススメできない学習方法はYoutube・Webサイトです。

Youtube・Webサイトは、挫折する可能性は高いです。なぜなら、情報の鮮度が古く・間違った解説のサイトやYoutubeの動画が多いため、優良なサイト・動画を探すのに時間が掛かるためです。要領よく学ぶには初心者には難しく、挫折しやすい勉強法となります。

どんな人にオススメ?
  • 学習する時間に余裕のある方
  • 情報の正確さを見極めることができる方
  • Flutterの基礎を一通り学んだ方
  • オリジナルアプリをリリースしたことのある方

Flutter公式サイトで学習

2つ目の初心者にオススメできない学習方法はFlutter公式サイト/Dart公式サイトです。

Flutter公式サイトは、挫折する可能性は高いです。なぜなら、すべて英語が書かれているため理解するのに時間が掛かります。また学習で詰まったときにも、自身で調べるしか手段は残ってないため、初心者には調査に時間が掛かり挫折しやすい。

どんな人にオススメ?
  • 英語のドキュメントが苦にならない方
  • Flutterの基礎を一通り学んだ方
  • オリジナルアプリをリリースしたことのある方

Flutter学習ロードマップ!初心者向けに始め方から解説!

では、オリジナルアプリリリースし実践力アップまでのロードマップを4ステップで解説してきます。

Flutterの学習は以下の流れで進めていきます。学習時間の目安は1日1時間です。

  1. 1か月目:基礎の学習 
    (Dart基本文法、ウィジェット、画面遷移、状態管理など)
  2. 2か月目:応用の学習
    (ライブライリ、バックエンド、広告設定など)
  3. 3か月目:オリジナルアプリ開発
    (スモールスタート)
  4. 4か月目:副業で実践力アップ

Step1.基礎の学習

Step1では、Flutterの基礎を学びます。

必要な基礎知識

  • Flutter概要
  • 開発環境の構築(Visual Studio Code、Xcode、Android Studio)
  • Flutterの基本構造
  • Dartの基本文法
  • Widget(ウィジェット)
  • マテリアルUI
  • 画面遷移
  • 状態管理 
  • レスポンシブ対応 など

基礎で学ぶべき内容は、どの学習方法でも習得できます。人により、好みがありますのでお好きな方法での学習をどうぞ。個人的には、Udemyの動画教材で進めながら、書籍・公式サイトをリファレンス的に活用する方法がやりやすいです。プログラミングスクールはお金に余裕がある、かつ、スピーディに学びたい方には向いています。

個人的に苦労した点

私は理論の理解に苦労しました。なぜなら、日本語でしっかり理論を説明している書籍・動画は本当に少ないからです。例えば、StatelessWidgetの解説で、StatelessWidgetとはステートレスなウィジェットです!という何とも意味のない解説の動画には驚きました。何も分かりません。正直、英語動画・公式サイトから学ぶ方が多かったです。

FlutterのUdemyおすすめコース7選でUdemyおすすめコースは紹介してますので、ご参考にどうぞ。

流行りのAIであるChatGPTを組み込んだアプリを学べるおすすめコースはこちらで詳しく解説してます。

基礎の学習方法

  • Udemy
  • 書籍
  • 公式サイト
  • プログラミングスクール

基礎の学習をしている中で、後にどんなアプリを作りたいのか構想しながら学習すると良いです。こんな仕組みを作るには、どうやったら良いのだろうかとイメージを膨らますと学習も身になります。

やきいも

基礎学習のポイントは、完璧に理解しなくても進めることです。こんなこと出来るのか!と知っとくだけで良いです。後でオリジナルアプリ開発時のインプットとなり、調べながらやれるからです。

Step2.応用の学習

Step2では、Flutterの応用を学びます。

応用で学習する内容

応用で学習すべき内容は、多岐に渡ります。今後、自分の作りたいアプリで必要となる知識・技術を身に付けると良いです。そのため、上記の技術は知っておくべき一例です。必要に応じて、プラスアルファでステップ2で学ぶべきことを学びましょう。

応用の学習方法

  1. Udemy
  2. 書籍
  3. 公式サイト
  4. プログラミングスクール

応用の学習段階で、大枠のオリジナルアプリのイメージが出来ていると効率的に学習が進めれます。

個人的に苦労した点

私が作りたいアプリでグラフを表示させたかったのですが、グラフ表示に使えるライブラリで何が良いのか調査に時間が掛かりました時間が掛かった点としては、うまく動作するサンプルコードが無かったので試行錯誤して動くレベルになるのに時間を費やしました。結果、調べていて情報が多かったのでfl_chartを利用しました。

Step3.オリジナルアプリ開発

Step3では、Flutterのオリジナルアプリ開発をします。オリジナルアプリ開発の進め方は以下の進め方でおこないます。

学習方法のポイントは、知らない知識はWebサイトで調べながら進めます。

  1. アプリ構想
  2. 設計
  3. プログラミング・テスト
  4. アプリのリリース
費用

アプリを公開するために、約18,180円が必要です。

  • 99ドル(AppleStore)年間
  • 25ドル(Google PlayStore)
    ※ 1ドル146円換算(2022/11/05時点)
やきいも

アップル税高い。。。

アプリ構想

アプリ構想では、のどんな悩みを解決できるアプリを作るのか考えます。対象ユーザーの年齢、性別、職業、趣味嗜好を明確にしていけると良いです。

設計

設計では、ユースケース設計、データ設計、UI設計をします。DBを利用しない仕組みの場合はデータ設計は不要です。ユースケース設計では、アプリ構想で決めたテーマに対して、詳細に利用用途のパターンを洗い出します。最後にUI設計で画面遷移やデータのインプット・アウトプットのタイミングを決めましょう。マテリアルデザインを見ながら、画面イメージを決めていくのは楽しいです。

おすすめの設計方法

作りたい画面がうまく纏まらない方は、人気上位アプリを参考にしましょう。そして、自分のアプリに適応できる点を頂きましょう。良いものは徹底的にぱくり自分のアプリに落とし込むのが生産性を上げるコツです。ジャンルやテーマ、画面を全パクリはマズいので、コンセプトは自分なりしっかり持ったうえで表面的な点を模倣しましょう。

プログラミング・テスト

プログラミング・テストでは設計に沿って、プログラミングで不明点は都度調べながらやっていく形です。テストはユースケースに沿って各機能が動作するか様々な端末で検証しましょう。Flutter公式にマテリアルライブラリのサンプルコードがあるので参考になります。

アプリのリリース

最後にアプリのリリース準備をおこないリリース申請し合格できたら完成です!iOSアプリよりAndoroidアプリの方が審査は甘く、費用も安いので先にAndroidアプリを申請するのがオススメです!

Step4.副業で実践力アップ

Step4では、Flutterの副業案件を受注して実践力をアップさせます。

副業案件の進め方は以下の通りです。

  1. 副業案件サイトに登録
  2. 副業案件に申し込む
  3. 土日に副業してスキルアップ

Flutterの副業案件の数はJava案件などと比較すると少ないです。目ぼしい案件があればすぐに応募できるように準備しておくと良いでしょう。フリーランスおすすめのエージェントはコチラで詳しく解説してます。

Flutter案件の特徴

  • 案件エリア:関東8割。関西、九州で2割。
  • 月単価:45万~150万
  • 業界:自動車、金融機関、医療、歯科、製造業、自治体、教育
  • 工程:基本設計~リリース
  • 開発手法:アジャイル、ウォーターフォール
  • 開発言語:Dart
  • フレームワーク:Flutter
  • 主要ライブラリ:Riverpod
  • バックエンド:GCP(Google Cloud Platform)、AWS(Amazon Web Services)、GraphQL
  • 開発, 運用環境:Github、Docker
  • アーキテクチャー:MVVM
  • 開発環境:・Visual Studio Code、Xcode、Android Studio
  • Flutter経験:半年以上~5年以上

おすすめフリーランスエージェントについてはコチラの記事で詳しく解説してます。

Flutter学習で挫折しない勉強方法のポイント

Flutter学習で挫折を防ぐための勉強方法のポイントは以下の3点です。

  • 完璧を求めて悩みすぎない
  • 早めにオリジナルアプリ開発を始める
  • わからないことは都度調べる

Flutterの学習で挫折を防ぐポイントは、基礎学習から応用学習はサクッと終わらせることです!悩みすぎないことが大事です。なぜこんな動きをするのか調べ始めるとかなり時間を要して、オリジナルアプリ開発が全く進めなくり、挫折しやすいです。何度も同じコードを書いていると規則性が自然と分かってきますので大丈夫です。

オリジナルアプリ開発を進めながら不明点は調べて学ぶのが理想的です!実務でも全て理解している状態で案件を受注・アサインされることはありません。実際に不明点は調べるケースが多いです。最終ゴールはオリジナルアプリ開発・改善を繰り返しながら、新規のアプリ開発を作っていくことです。

Flutter学習を始めるのに向いている人!4つの特徴!

数あるプログラミング言語やクロスプラットフォームの中で、Flutter習得に向いている人の4つの特徴を解説します。

  • Java/Java Scriptのエンジニアの方
  • エンジニアの幅を広げたい方
  • 個人アプリ開発を挑戦したい方
  • フリーランスとして稼ぎたい方

Java/Java Scriptのエンジニアの方

プログラミング言語DartがJavaJava Scriptに似ているため、Dartの習得に時間が掛かりません。JavaやJava Scriptを習得済みの方にとっては、初期の学習コストを抑えることができるのでFlutterの習得には向いています!

将来的にエンジニアの幅を広げたい方

IT大国のアメリカ、中国、インド、オフショア先である韓国やアイルランドなど様々な国でFlutterの需要が着実に伸びています。日本も同じ傾向にあります!なので、将来的にエンジニアとしてのスキルの幅を広げたい方はおすすめです!Flutter エンジニアとして転職したい方は、IT転職に特化したがおすすめです。そのほかの新卒やIT未経験でFlutterエンジニアに転職・就職する際のおすすめエージェントについて事前に登録して準備しておくと、いざという時に活用できます。

個人アプリ開発を挑戦したい方

Flutterはクロスプラットフォームなので、iOS、Android、WebとOSに依存しないアプリを1つのソースコードで開発ができます。個人でiOSはswift、AndoroidはJava/Kotlin、Webはフロント言語でHtml,Javascript,Jspなどとバックエンド言語(Java、PHPなど)を駆使しながら3つのアプリを開発しリリースし収益化するのは時間的に至難の業です。Flutterであれば1つのアプリ開発の収益化ハードルもだいぶ下がりますので、個人アプリ開発に挑戦したい方におすすめです。

フリーランスとして稼ぎたい方

フリーランスとしてFlutterで稼ぎたい方におすすめです。自身のスキルを使って、案件を受注することも可能です!また、案件のお手伝いとしてアルバイトでFlutterの開発作業支援でお小遣いを稼ぐこともできるでしょう!Flutterの経験者は少ないので、早めに高スキルを身に付ければ高単価な案件も狙えます。ただ、Flutter案件の数は少ないので早めにフリーランス求人の案件内容をチェックしておくことをおすすめします。フリーランスおすすめのエージェントはコチラで詳しく解説してます。

Flutter参考サイトまとめ

Flutterアプリ開発でよく参考にするサイトを纏めました。開発時のご参考にどうぞ。

スクロールできます
サイト内容
Flutter公式Flutter最新情報のリリース
Dart公式Dart最新情報のリリース
Flutterウィジェットウィジェットカタログ
マテリアルライブラリマテリアルデザインのソースサンプルと解説
マテリアルデザインマテリアルデザインのコンポーネント
ライブライリ一覧Flutter・Dart公式ライブライリ一覧
アイコン一覧Googleが提供しているFlutterアプリ開発で使えるアイコン一覧
Riverpod人気ライブりRiverpodの公式解説ページ
SQLiteローカルデータベースの解説ページ

まとめ:Flutter入門者はオリジナルアプリ開発に早めにチャレンジしよう!

今回の記事では初心者向けにFlutterの学習ロードマップについて解説しました。纏めますと以下の通りです!

自分にあった学習方法で進めましょう!

まとめ
Flutter学習ロードマップ
  • 1-2か月 基礎・応用学ぶ
  • 3か月 オリジナルアプリ開発
  • 4-5か月 副業で実践力アップ
Flutterおすすめ学習方法
  • Udemyで実技
  • 書籍で理論
  • 公式サイトで最新情報の取得


最後まで読んで頂きありがとうございました!

目次