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

※この動画コースは、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

※この動画コースは、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. Null Safetyとは？
14. DartにおけるNull Safetyの活用
15. クラスとインスタンスについて
16. クラス & インスタンス
17. 修飾子について
18. final & const
19. _(アンダースコア) privateについて
20. static
21. 変数について
22. 代入とは
23. 算術演算子
24. 代入演算子
25. if文の基礎
26. 比較演算子
27. if文の基本的な活用
28. 論理演算子
29. 三項演算子
30. 変数のスコープ
31. switch文の基礎
32. switch文の基本的な活用
33. enum
34. for文の基礎
35. for文の基本的な活用
36. for-in文
37. while文の基礎
38. while文の基本的な活用
39. while文におけるbreakとcontinue
40. Exceptionの基礎
41. try-catch文
42. 今後の学習について
43. これからの学習方法
44. ボーナストラック
45. ボーナスレクチャー1
46. ボーナスレクチャー2

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

概要

簡単なメモアプリの開発を通してFlutterとFirebaseを用いたアプリ開発の方法を学習する動画コースです。

Firebaseのセットアップから、Cloud Firestoreと情報をやりとりする方法まで、開発に必要な基礎知識を身に付けることが可能です。

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

学習できること

• Firebaseプロジェクト作成の方法

• FlutterとFirebaseとの連携設定

• データベースのコレクション作成

• Cloud Firestoreへのデータ書き込み（追加・編集・削除）

※この動画コースはFlutterの環境構築方法については解説しておりません。

環境構築についての動画もUdemyで公開しているのでご確認ください。

1. 教材の内容紹介
2. コース紹介 & ゴールの確認
3. 【2022年7月最新】メモアプリの作成
4. コード整理
5. アプリのタイトル変更
6. メモクラスを定義
7. FlutterFireの実装
8. Cloud Firestoreの設定
9. TopPageにメモリストを表示
10. リストタップでメモの詳細を確認可能に
11. メモ追加画面のUI作成
12. 追加ボタンタップでメモを追加可能に
13. 追加したメモをリアルタイムで取得可能に
14. リストの右側のボタンタップでボトムシート表示
15. 編集画面を作成しメモを更新可能に
16. メモを削除可能に
17. 並び替えや特定のメモだけを取得する
18. メモアプリの作成
19. コード整理 & ToDoリストの作成
20. アプリのタイトルを変更
21. メモクラスを定義
22. Android用Firebaseプロジェクトの作成
23. iOS用Firebaseプロジェクトの作成
24. Cloud Firestoreを設定
25. FlutterとFirebaseを連携
26. TopPageにメモリストを表示
27. リストをタップでメモの詳細を確認可能に
28. メモ追加画面のUIを作成
29. 追加ボタンタップでメモを追加可能に
30. 追加したメモをリアルタイム取得表示
31. リストの右側のボタンタップでボトムシート表示
32. 編集画面を作成しメモを更新可能に
33. メモを削除可能に
34. これからの学習方法
35. これからの学習について
36. ボーナスレクチャー
37. ボーナスレクチャー1
38. ボーナスレクチャー2

Flutterでアプリの作成をしてます！以前はsetStateやBLocで状態管理してアプリを開発していました。しかし、どうにも拡張性が低くなって、メンテが難しくなってしまいました。

もっと便利な物はないかと調べると、最近は日本ではRiverpodが主流、ということで、使用してみました。WEBページなどで調べて、一通りマスターしましたが、どうにも綺麗に書けません。JavaFX(JavaのGUIライブラリ)では、もっと気持ちよく書けてたのに！ということで、MVVMパターンを使えば、モデルとビューをうまく切り分けられないかと試行錯誤しました。結果、いい感じにまとめることができました！

この講座では、Riverpodの基本的な使用方法を勉強します。それだけでなく、Riverpodを使用して、MVVMパターンを実現し、ロジックとビューを切り離し、メンテしやすい実装方法を学習します。ロジックとビューを切り離すことは、それぞれ実装できるだけがメリットではありません。それぞれでテストすることが可能になりました。Unit Test、Widget Test、Flutter Golden Testを使用して、内部的にも、外観的にもテストする方法も紹介してます。外からデータを与えたり、Mockを使うテスト手法も紹介してます。

またFirebaseのFirestoreからデータを追加し、riverpodで表示する方法や、WebAPIからのデータをriverpodで表示する方法も分かります。

Riverpod初心者の方はもちろん、中級者の方(ご意見、お待ちしてます)にも参考になると思います！ソースは全て閲覧可能ですので、ご自身の開発に役に立ててください！一緒に綺麗なソースを書いていきましょう！

【履歴】

2021/11/07 riverpod 1.0.0のリリースに伴い、講座との差異の講座を追加しました。ソースは修正しました。

2022/03/26 FutureProviderを使って、MVVMを実装する方法を更新しました。

1. Riverpodの基本
2. Riverpodの基礎知識
3. メモ
4. riverpodの1.0.0系がが正式リリースされました
5. インストール
6. flutter pub getでエラーが発生した場合【flutter_riverpod 1.0.3の場合】
7. MyAppをProviderScopedで囲む
8. Riverpodを使用するための準備
9. タイトル用のProviderの作成
10. メッセージ用のProviderの作成
11. StateProviderの作成
12. なぜConsumerを使うか
13. Consumerに書き換える
14. 全てConsumerに書き換える
15. なぜreadを使うか
16. ConsumerStatefulWidget
17. 【補習】readの挙動を確認
18. 【補習】readの挙動を確認(Consumerを使用した例)
19. MVVMパターン
20. MVVMパターンの基礎知識
21. MVVM用に外観を書き換える
22. freezedの解説とインストール
23. freezedでデータクラスを作成
24. データクラスをStateProviderにする
25. 最後にはstateに入れよう
26. selectでWidget再構築を抑える
27. Modelのロジックのクラスを作る
28. Modelのロジックをテスト：インストールと初期値
29. Modelのロジックをテスト：メソッド
30. Modelのロジックをテスト：リセット
31. ViewModelのクラスを作る
32. ViewModelに置き換えていく
33. ViewModelでメソッドを置き換えていく
34. ViewとViewModelの繋がりをテストする
35. ViewとViewModelの繋がりをWidgetTestする
36. ViewとViewModelの繋がりをGoldenTestする準備をする
37. ViewとViewModelの繋がりをGoldenTestする
38. GoldenTestでフォントを表示させる
39. GoldenTestでテストをしてみる
40. GoldenTestでtapしてみる
41. GoldenTestでMockをしてみる
42. GoldenTestでMockitailで数値をテストする
43. GoldenTestでMockitailでタップ回数を確認する
44. Providerの中身を入れ替える
45. 新しいロジックを追加する
46. 音のロジックを追加する
47. Assetsの設定の注意
48. SoundLogicを作成する
49. Androidエミュレータでエラーが発生
50. SoundLogicをViewModelから呼び出す
51. SoundLogicに音の鳴る条件を作成する
52. SoundLogicの音の鳴る条件を呼び出す
53. アニメーションを作る
54. アニメーションのWidgetを作る
55. アニメーションに起動条件をつける
56. ポリモフィズムで起動条件のクラスを作成する
57. 起動条件のインスタンスをリストでまとめる
58. 他のボタンに同様のアニメーションを作る
59. アニメーションの起動条件用のクラスを作る
60. アニメーションの起動条件をつける
61. 回転のアニメーションを追加する
62. 回転アニメーション用の変数を作成する
63. 回転アニメーションのためのsinを学ぶ
64. 回転アニメーションの調整する
65. 二つのアニメーションの変数を管理するクラスの作成する
66. AnimationCombinationクラスを適応させる
67. マイナスとリセットに回転のアニメーションをつける
68. 不要なコードの削除する
69. SharedPreferenceのプラグインをインストールする
70. SharedPreferencesに保存するクラスを作成
71. SharedPreferencesLogicを呼びだして、保存・読込を実行する
72. SharedPreferencesの値でLogicを初期化する
73. FutureProviderでの実装
74. FutureProviderでなにを実装するか
75. FutureProviderを使うためプラグインをインストールする
76. 郵便番号データを取り扱うデータクラスを作成する
77. データクラスのテストを開始する
78. データクラスのテストを完成させる
79. 画面を作成する
80. providerを作成する
81. 入力データをFutureProvider に渡せるようにする
82. FutureProviderから簡略化した形で表示する
83. FutureProviderからのデータを表示する
84. リストデータを表示して、完成
85. ここから、riverpodのバージョンが変わります
86. FutureProviderにfamilyで引数を追加する
87. familyで表示する
88. メモリーリークが発生しないようにautoDisposeを追加する
89. familyの引数の注意点
90. FutureProviderをMVVMにする
91. Logicを切り出す
92. ViewModel内にProviderを作成する
93. ViewModel内に値を定義する
94. ViewModel内にメソッドを定義する
95. Pageを切り出す
96. 7文字の時だけ実行できるようにする
97. Providerの設置場所の理由について
98. StreamProviderでFirestoreを実装する
99. StreamProvierを使用して作成するアプリの説明
100. StreamProviderを使うためにプラグインをインストールする
101. データクラスの作成
102. AndroidでFirestoreと通信するために設定
103. Firestoreにデータを追加する
104. FirestoreとアクセスするStreamProviderを作成する
105. StreamProviderからのデータを一つ表示する
106. StreamProviderからのデータを複数表示する
107. ボーナスレクチャー
108. ボーナスレクチャー

※この動画コースは、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