Flutter のおすすめの教材8選！ 【 2024年11月 最新版】

「Flutterアプリ開発講座(初級編)」は、FlutterとDartの基本を学ぶ入門コースです。

Googleのアプリ開発フレームワークであるFlutterを使用して、ソフトウェア開発/モバイルアプリ開発を学びます。

本講座では、開発環境の構築、開発ツール(Android Studio)の使い方、ウィジェットの基本、Dart言語の基礎、状態管理、Firebaseの導入など、基礎ですが重要な概念を丁寧に学習していきます。

各回のレクチャーでは、理論を学んだ後に実際のプロジェクトを作成し、実践で具体的な内容を確認していきます。

練習問題を用いて、講義で学んだ技術や概念をコーディングに活かし、理解を深めることができます。

また、クイズでは楽しく学んだ内容をおさらい・復習していきます。

Flutter開発・アプリ開発・プログラミングに関心のある初心者や基礎を学びたい方に最適です。

本講座で、Flutter開発者・アプリ開発者としての第一歩を踏み出しましょう！

1. オリエンテーション・Flutte開発環境構築
2. はじめに / この講座でできること / 講師陣の紹介
3. 第1回の講座内容 / Flutterとは何か？
4. Dartとは何か？
5. Flutterの開発環境
6. クイズ
7. Mac_実践①：Android Studioのダウンロード・インストール / Xcode のインストール / Flutter プラグインのインストール
8. Mac_実践②：Flutter SDKのダウンロード・インストール
9. Mac_実践③：Flutter SDKパス：環境変数の設定
10. Mac_実践④：Flutter CLIツール での確認
11. Mac_実践⑤：Flutterプロジェクトの作成
12. Mac_実践⑥：iOSシミュレータでの動作確認
13. Mac_実践⑦：Androidエミュレーターでの動作確認
14. Windows_実践①：Android Studioのダウンロード・インストール / Flutter プラグインのインストール
15. Windows_実践②：Flutter SDKのダウンロード・インストール
16. Windows_実践③：Flutter SDKパス：環境変数の設定
17. Windows_実践④：Flutter CLIツール での確認 / Visual Studioのインストール
18. Windows_実践⑤：Flutterプロジェクトの作成
19. Windows_実践⑥：Androidエミュレーターでの動作確認
20. 練習問題：事前準備 / main.dart の説明
21. 練習問題①：カウンタープログラムの改造：日本語表示
22. 練習問題②：カウンタープログラムの改造：カウンター値の改造
23. 練習問題③：カウンタープログラムの改造：背景色の改造
24. 今回学んだ内容
25. Android Studioの使い方
26. 第2回の講座内容
27. Android Studioとは / VSCodeとの比較
28. 新規プロジェクトの作成
29. Android Studioの起動方法
30. 新規プロジェクトの作成～実践編～
31. Android Studioのインターフェース　その１
32. Android Studioのインターフェース　その２
33. Android Studioの基本的な操作
34. LiveTemplateの解説
35. デバッグとテスト：ブレイクポイント/ログ出力
36. クイズ
37. 練習問題①：Stateless Widget を使おう
38. 練習問題②：背景色の変更とブレイクポイントでの確認
39. 今回学んだ内容
40. ウィジェット
41. 第3回の講座内容 / ウィジェットとは
42. 新規プロジェクトの作成
43. ウィジェットの紹介その１（Centerウィジェット / Textウィジェット）
44. ウィジェットの紹介その２（Textウィジェット）
45. ウィジェットの紹介その３（TextStyleオブジェクト）
46. ウィジェットの紹介その４（image.networkウィジェット）
47. ウィジェットの紹介その５（Image.assetウィジェット）
48. ウィジェットの紹介その６（Paddingウィジェット）
49. ウィジェットの紹介その７（Paddingウィジェット：EdgeInsets ）
50. ウィジェットの紹介その８（ColoredBoxウィジェット/Colorsウィジェット）
51. ウィジェットの紹介その９（Color.fromARGBウィジェット）
52. ウィジェットの紹介その１０（Alignウィジェット）
53. ウィジェットの紹介その１１（TextButtonウィジェット）
54. ウィジェットの紹介その１２（AlertDialogウィジェット）
55. ウィジェットの紹介その１３（ElevatedButtonウィジェット）
56. ウィジェットの紹介その１４（RoundedRectangleBorder）
57. ウィジェットの紹介その１５（CircleBorder）
58. ウィジェットの紹介その１６（OutlineButtonウィジェット）
59. クイズ
60. 練習問題①：じゃんけんプログラムその１
61. 練習問題②：じゃんけんプログラムその２
62. 練習問題③：じゃんけんプログラムその３
63. 今回学んだ内容
64. ウィジェット(レイアウト)
65. 第4回の講座内容 / ウィジェットとは(復習)
66. 新規プロジェクトの作成
67. ウィジェットの紹介（Scaffold）
68. ウィジェットの紹介（ColumnとRow）
69. ウィジェットの紹介（ColumnとmainAxisAlignment）
70. ウィジェットの紹介（ColumnとcrossAxisAlignment）
71. 実践（ColumnをRowに置き換える）
72. ウィジェットの紹介（SingleChildScrollView）
73. ウィジェットの紹介（ListView）
74. ウィジェットの紹介（ListTile）
75. クイズ
76. 練習問題①：ログイン画面の作成
77. 練習問題②：電話帳アプリのUIの作成
78. 今回学んだ内容
79. Dart初級
80. 第5回の講座内容 / Dartとは
81. 新規プロジェクトの作成
82. 文法　～変数～
83. 文法　～定数～
84. 文法　～演算子～
85. 実践　～演算子～
86. 文法　～関数～
87. 文法　～条件文～
88. 実践　～条件文～
89. 文法　～ループ文～
90. 実践　～ループ文～
91. クイズ
92. 練習問題①：インチからセンチを求めるアプリの作成
93. 練習問題②：センチからインチを求めるアプリの作成
94. 練習問題③：BMI（ボディマス指数）計算アプリの作成
95. 今回学んだ内容
96. 画面遷移
97. 第6回の講座内容 / 画面遷移とは
98. 新規プロジェクトの作成
99. 実装：画面遷移
100. 実践①：プッシュ遷移とモーダル遷移の実装と確認
101. 実践②：遷移先ページへのパラメーター渡し
102. クイズ
103. 練習問題：ListViewの一覧画面から詳細画面へのプッシュ遷移
104. 今回学んだ内容
105. StatefulWidgetを使った状態管理
106. 第7回の講座内容 / StatefulWidgetとは
107. StatefulWidgetとは：画面描画タイミング
108. 新規プロジェクトの作成
109. 実践①：setState()あり・なしでの チェックボックスの状態確認
110. 実践①：setState()あり・なしでの チェックボックスの状態確認 〜動作確認〜
111. 実践②：setState()あり・なしでの スライダーの状態確認
112. 実践②：setState()あり・なしでの スライダーの状態確認 〜動作確認〜
113. クイズ
114. 練習問題①：ストップウォッチアプリの作成：ヒント１
115. 練習問題①：ストップウォッチアプリの作成：ヒント２
116. 練習問題①：ストップウォッチアプリの作成：解答
117. 練習問題②：数字当てゲームの作成：問題、ヒント１
118. 練習問題②：数字当てゲームの作成：ヒント２
119. 練習問題②：数字当てゲームの作成：ヒント３、解答
120. 練習問題②：数字当てゲームの作成：動作確認
121. 今回学んだ内容
122. HTTPを使ったAPI通信
123. 第8回の講座内容 / HTTPとは
124. APIとは
125. 新規プロジェクトの作成
126. 実装①：Image.networkの実装
127. 実装②：WebViewの実装
128. 実装③-1：郵便番号APIの実装１
129. 実装③-2：郵便番号APIの実装２
130. 実装③-3：郵便番号APIの実装３
131. クイズ
132. 練習問題①-1：ブックマークアプリの作成：問題
133. 練習問題①-2：ブックマークアプリの作成：ヒント1
134. 練習問題①-3：ブックマークアプリの作成：ヒント2
135. 練習問題①-4：ブックマークアプリの作成：解答・動作確認
136. 練習問題②-1：天気情報アプリの作成：問題・準備１・準備２
137. 練習問題②-2：天気情報アプリの作成：ヒント1
138. 練習問題②-3：天気情報アプリの作成：ヒント２
139. 練習問題②-4：天気情報アプリの作成：解答・動作確認
140. 今回学んだ内容
141. Firebaseとの通信
142. 第9回の講座内容 / Firebaseとは
143. Firestoreとは
144. 新規プロジェクトの作成
145. 実装①-1：TODOアプリの作成：Node.js インストール・firebase-tools インストール
146. 実装①-2：TODOアプリの作成：Firebaseアカウト/プロジェクト作成
147. 実装①-3：TODOアプリの作成：Firestore準備
148. 実装①-4：TODOアプリの作成：pubspec.yaml の設定
149. 実装②-1：TODOアプリの作成：骨子の実装１
150. 実装②-2：TODOアプリの作成：骨子の実装２
151. 実装②-3：TODOアプリの作成：骨子の実装３
152. 実装②-4：TODOアプリの作成：骨子の実装４
153. 実装③-1：TODOアプリの作成：機能の実装１：main関数
154. 実装③-2：TODOアプリの作成：機能の実装２：コレクションキー、firestoreオブジェクト生成
155. 実装③-3：TODOアプリの作成：機能の実装３：watch関数
156. 実装③-4：TODOアプリの作成：機能の実装４：save関数、動作確認
157. クイズ
158. 練習問題①：TODOアプリの改造：完了・未完了処理
159. 練習問題②：TODOアプリの改造：削除処理
160. 練習問題③：TODOアプリの改造：TODOアイテムの日時を保存・表示
161. 今回学んだ内容
162. チャットアプリの作成
163. 第10回の講座内容 / チャットアプリとは
164. 新規プロジェクトの作成
165. 実装①-1：入室画面：環境構築：pubspec.yaml の設定
166. 実装①-2：入室画面：環境構築：Firebaseプロジェクト作成 / Firestore準備
167. 実装②-1：入室画面：骨子の実装１
168. 実装②-2：入室画面：骨子の実装２
169. 実装③-1：入室画面：機能の実装１：UIコード
170. 実装③-2：入室画面：機能の実装２：enter関数
171. 実装③-3：入室画面：機能の実装３：showError関数
172. 実装④-1：チャット画面：骨子の実装１、２
173. 実装④-2：チャット画面：骨子の実装３
174. 実装④-3：チャット画面：骨子の実装４
175. 実装⑤-1：チャット画面：機能の実装１：main関数
176. 実装⑤-2：チャット画面：機能の実装２：initState関数
177. 実装⑤-3：チャット画面：機能の実装３：watch関数
178. 実装⑤-4：チャット画面：機能の実装４：save関数
179. 実装⑤-5：チャット画面：機能の実装５：UIコード、動作確認
180. 練習問題：チャットアプリの改造：① 投稿日時
181. 練習問題：チャットアプリの改造：② 自分と他人を区別する
182. ボーナスレクチャー

※この動画コースは、Flutter学習サービス『Flutterラボ』でも公開しています。

---2022年5月29日更新---

最新バージョンFlutter3.0.1での環境構築の手順を追加公開しました

---

Googleが提供するクロスプラットフォーム開発ツール『Flutter』を用いて、1つのソースコードでiOS・Androidの両方で動作するモバイルアプリを開発する手法を学んでいきます。

モバイルアプリ開発や、プログラミング言語の記述の基礎を学ぶことができます。

1. 紹介
2. 講座紹介
3. Macでの環境構築【2022年5月現在】
4. Flutter SDKのインストール
5. パスの設定
6. AndroidStudioのセットアップ
7. Xcodeのセットアップ
8. WEBとMacOSアプリのビルドを実行
9. macでの環境構築
10. Flutter SDKのインストール
11. パスの設定
12. Android Studioのセットアップ
13. Android licenseを許可する
14. Xcodeのセットアップ
15. Android StudioにFlutterプラグインをインストール
16. 新規Flutterプロジェクトの作成
17. 仮想デバイスの実装&デモアプリの実行
18. Windowsでの環境構築【2022年5月現在】
19. Flutter SDKのインストール
20. パスの設定
21. Android Studioのセットアップ
22. Android Toolchainの設定
23. Android StudioにFlutterプラグインをインストール
24. 新規Flutterプロジェクトを作成
25. 仮想デバイスの実装&デモアプリの実行
26. Windowsでの環境構築
27. Flutter SDKのインストール
28. パスの設定
29. Android Studioのセットアップ
30. Android licenseを許可する
31. Android StudioにFlutterプラグインをインストール
32. 新規Flutterプロジェクトの作成
33. 仮想デバイスの実装&デモアプリの実行
34. 簡単なアプリを開発【2022年5月最新版】
35. コメントアウトの削除
36. メインページのタイトルを変更
37. メイン画面にリストを表示
38. 区切り線を表示してリストを見やすくする
39. リスト表示を動的に
40. ボタンタップでリストを追加
41. リストタップで画面遷移
42. 遷移先の画面のUI作成
43. コンストラクターを用いて遷移先のページに情報を渡す
44. 簡単なアプリを開発
45. アプリの完成イメージを持とう
46. アプリ開発の準備をしよう
47. メインページのタイトルを変更しよう
48. 練習問題1:アプリのヘッダータイトルを自分好みのものに変更してみましょう
49. メイン画面にリストを表示しよう
50. 練習問題2:表示するリストの内容を変更してみよう
51. 区切り線を表示してリストを見やすくしよう
52. リスト表示を動的に
53. 練習問題3:表示するリストの数を変更してみましょう
54. ボタンタップでリストを追加表示
55. 練習問題4:追加されるリストの数を変更してみましょう
56. リストをタップした時に画面を遷移
57. 練習問題5:NextPageからさらに画面遷移できる様にしてみよう
58. 遷移先の画面のUIを作成
59. コンストラクターを用いて遷移先のページに情報を渡す
60. 練習問題6:遷移先のページにIDとPWの情報を送り表示してみよう
61. Flutter for WEBの環境構築
62. WEB対応の実装&デモアプリの実行
63. 実機デバイスでのデバッグ方法
64. iPhone実機でのデバッグ方法
65. Android実機でのデバッグ方法
66. ボーナスレクチャー
67. ボーナスレクチャー1
68. ボーナスレクチャー2

「Progateなどで基礎は学んだが、ここから実際にどうやって勉強すればエンジニアになれるんだろう...」

プログラミング初心者でこんなお悩みを抱えている方多いのではないでしょうか。

本講座はFlutterを使って「NARUTO図鑑」「音楽プレイヤー」「SNS」「AIコードレビュアー」の4つのアプリを作り、実践的な開発を学ぶことで初心者→実務のギャップを埋めることができる講座です。

世の中の多くのプログラミング学習コンテンツは言語の文法や機能など、基礎的な内容の学習がほとんどです。

しかし、エンジニアになるにはこうしたプログラミングの基礎知識を応用した上で、実際に動きユーザーが便利に使えるプロダクトを作れなければいけません。

ここに実際にエンジニアになれるレベルと基礎学習を終えたばかりのレベルの大きなギャップがあり、かつ埋めるためのコンテンツも非常に少ないため、多くの初心者の挫折の原因となっています。

本講座はこうしたギャップを埋めるために作られたコンテンツです。

最後まで受講して頂くと

• エンジニアとしてプロダクトを作り、実務をこなすイメージがつく

• 転職/就職活動時に一番重要なポートフォリオに記載するプロダクトを作る力が身に付く

• より実践的で深いFlutterの知識が身に付く

• プロダクトを作れることで、よりプログラミングが楽しくなる

といった、本気でエンジニアを目指している方向けの講座となっております。

■ 本コースを受講する際の注意点

・Flutterの基本は理解している、もしくは都度調べながら進めていただくことが前提の講座となっております

・各Widgetの挙動やライフサイクルなどの基礎については解説していません

Flutterの学習をしたことがなくても

・ReactやVueなどWebフロントエンドのJSフレームワークを理解できている

・いきなりアプリを動かす形で学習したい

という方であれば、調べつつ進められる内容ではあるかと思います。

1. はじめに
2. 本講座で学ぶこと
3. 受講にあたってのお願い
4. 環境のセットアップ
5. Flutterの環境設定
6. VSCodeのインストール
7. NARUTO図鑑アプリを作ろう
8. 【NARUTO図鑑アプリ】まずは完成版を見てみよう
9. プロジェクトのセットアップ
10. NARUTO APIについて
11. Dioを使ってFlutterからAPIをコールしてみよう
12. 取得したデータをfreezedを使って作ったクラスで管理しよう
13. 取得したデータを画面に表示してみよう1
14. 取得したデータを画面に表示してみよう2
15. 無限ロードを作ってみよう1
16. 無限ロードを作ってみよう2
17. 音楽プレイヤーアプリを作ろう
18. 【音楽プレイヤーアプリ】まずは完成版を見てみよう
19. プロジェクトのセットアップ
20. Spotify APIのセットアップ
21. APIのアクセストークンを取得しよう（環境変数にClient IDとClient Sercretを格納しよう）
22. APIのアクセストークンを取得しよう2（APIからアクセストークンを取得しよう）
23. APIのアクセストークンを取得しよう3（Spotify Clientを使いやすくリファクタしよう）
24. Spotifyで人気の曲を取得、表示してみよう1（APIからデータを取得しよう）
25. Spotifyで人気の曲を取得、表示してみよう2（freezedを使ってデータを管理しよう）
26. Spotifyで人気の曲を取得、表示してみよう3（取得したデータを表示しよう）
27. クリックした曲を再生できるようにしよう1
28. クリックした曲を再生できるようにしよう2
29. 曲を検索できるようにしよう1
30. 曲を検索できるようにしよう2
31. 無限ロードを実装してみよう
32. SNSアプリを作ろう
33. 【SNSアプリ】まずは完成版を見てみよう
34. プロジェクトのセットアップ
35. ルーティングの設定をしよう
36. Supabaseのセットアップ
37. ユーザーの登録機能を作ろう1
38. ユーザーの登録機能を作ろう2
39. ユーザーのログイン機能を作ろう
40. グローバルステートを使って、ユーザーのログイン状態を管理しよう1
41. グローバルステートを使って、ユーザーのログイン状態を管理しよう2
42. ログインしているユーザーの情報を表示しよう
43. 投稿を作成できるようにしよう1
44. 投稿を作成できるようにしよう2
45. タイムラインに投稿を表示しよう
46. 無限ロードを実装しよう
47. 投稿を削除できるようにしよう
48. AIコードレビュアーを作ろう
49. 【AIコードレビュアー】まずは完成版を見てみよう
50. プロジェクトのセットアップ
51. Geminiのセットアップ
52. AIにリクエストを投げ、コードレビューしてもらおう1
53. AIにリクエストを投げ、コードレビューしてもらおう2
54. コードレビューの結果を画面に表示しよう
55. ボーナスレクチャー
56. ボーナスレクチャー

※この動画コースは、Flutter学習サービス『Flutterラボ』でも公開しています。

Flutter開発で最低限知っておきたいDartの基礎知識を学習することができます。

プログラミング言語の学習は終わりがないのでどこまでできるようになれば良いのかわからないという意見をたくさん頂きました。

Flutter開発の学習をする上で、これだけ知っていればとりあえず進められると思う内容をピックアップして解説しているので、上級者にとっては物足りない内容かもしれませんが、プログラミング初心者や、他のプログラミング言語は習得しているがFlutterは始めたばかりという方にとって最短でFlutterを学習できるようになる内容を目指しています。

1. イントロダクション
2. コースの紹介
3. Dartの基礎データ型を学習しよう
4. int & double
5. String
6. bool
7. Listと変数について
8. Map
9. var
10. Function
11. Future
12. Widget
13. クラスとインスタンスについて
14. クラス & インスタンス
15. 修飾子について
16. final & const
17. _(アンダースコア) privateについて
18. static
19. 変数について
20. 代入とは
21. 算術演算子
22. 代入演算子
23. if文の基礎
24. 比較演算子
25. if文の基本的な活用
26. 論理演算子
27. 三項演算子
28. 変数のスコープ
29. switch文の基礎
30. switch文の基本的な活用
31. enum
32. for文の基礎
33. for文の基本的な活用
34. for-in文
35. while文の基礎
36. while文の基本的な活用
37. while文におけるbreakとcontinue
38. Exceptionの基礎
39. try-catch文
40. Null Safetyとは？
41. DartにおけるNull Safetyの活用
42. 今後の学習について
43. これからの学習方法
44. ボーナストラック
45. ボーナスレクチャー1
46. ボーナスレクチャー2

※この動画コースは、Flutter学習サービス『Flutterラボ』でも公開しています。

概要

FlutterでUIを作成する際に不可欠な『Widget』。

よく使うWidget50選の使い方をひとつひとつ解説しています。

解説Wideget

• 基本Widget

  • Scaffold

  • Text

  • AppBar

  • Image

  • Icon

  • BottomNavigationBar

  • Drawer

  • FloatActionButton

  • RichText

• UIを構成するWidget

  • Container

  • Column

  • Row

  • Stack

  • Align

  • AspectRatio

  • Expanded

  • Padding

  • SizedBox

  • Center

  • ClipRRect

  • Divider

  • ProgressIndicator

  • Spacer

  • Opacity

  • BottomNavigationBar

  • Table

  • Wrap

• スワイプ&スクロールできるWidget

  • ListView

  • SingleChildScrollView

  • GridView

  • PageView

  • RefreshIndicator

  • Scrollbar

  • TabBarView

• ユーザーの行動に影響するWidget

  • TextField

  • GestureDetector

  • ElevatedButton

  • DropDownButton

  • IconButton

  • OutlinedButton

  • PopupMenuButton

  • TextButton

  • Slider

  • BackButton

  • CheckBox

  • Radio

  • Switch

• アニメーションWidget

  • Hero

• 非同期処理のWidget

  • FutureBuilder

  • StreamBuilder

※他に解説してほしいWidgetがあればコメントでご要望ください。

1. 紹介
2. 紹介
3. 基本Widget
4. Scaffold
5. Text
6. AppBar
7. Image
8. Icon
9. BottomNavigationBar
10. Drawer
11. FloatingActionButton
12. RichText
13. UIを構成するWidget
14. Container
15. Column
16. Row
17. Stack
18. Align
19. AspectRatio
20. Expanded
21. Padding
22. SizedBox
23. Center
24. ClipRRect
25. Divider
26. ProgressIndicator
27. Spacer
28. Opacity
29. BottomNavigationBar
30. Table
31. Wrap
32. スワイプ&スクロールできるWidget
33. ListView
34. SingleChildScrollView
35. GridView
36. PageView
37. RefreshIndicator
38. Scrollbar
39. TabBarView
40. ユーザーの行動に影響するWidget
41. TextField
42. GestureDetector
43. ElevatedButton
44. IconButton
45. OutlinedButton
46. TextButton
47. DropdownButton
48. PopupMenuButton
49. Slider
50. BackButton
51. CheckBox
52. Radio
53. Switch
54. アニメーションWidget
55. Hero
56. 非同期処理のWidget
57. FutureBuilder
58. StreamBuilder
59. 今後の学習について
60. 今後の学習について
61. ボーナストラック
62. ボーナスレクチャー1
63. ボーナスレクチャー2