Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Flutter x Riverpod x MVVMで実現するシンプルな設計(Firebase, WebAPI対応)
Rating: 4.1 out of 5(176 ratings)
1,287 students
Created byさく しん @Flutter修行中
Last updated 11/2023
Japanese

What you'll learn

  • FlutterでシンプルなGUIを実現するための方法
  • Riverpodの基本的な使用方法
  • RiverpodでMVVMを実現する方法
  • Flutterでテストしやすいソースを作成する方法
  • Flutterの基本的なテスト方法
  • FlutterのMockを使用してテストする方法

Course content

6 sections • 104 lectures • 6h 0m total length

  • Riverpodの基礎知識5:41

    Flutterのプラグイン「Riverpod」の基本的な情報を学習します

  • メモ1:38
  • riverpodの1.0.0系がが正式リリースされました5:02

    flutter の riverpod の1.0.0と、講座とのソースの差異を学習します

  • インストール2:42

    Flutterのプラグイン「Riverpod」をプロジェクトにインストールします

  • flutter pub getでエラーが発生した場合【flutter_riverpod 1.0.3の場合】0:46

    flutter_riverpod 1.0.3でプラグイン同士の整合性がとれないという報告を頂いたので、調査し、整合性のとれるバージョンを使用したpubspec.yamlを作成しました

  • MyAppをProviderScopedで囲む1:36
  • Riverpodを使用するための準備2:03

    Flutterのプラグイン「Riverpod」が使用できるようにStatefulWidgetをConsumerWidgetにします

  • タイトル用のProviderの作成3:32

    タイトル用のProviderを作成します

  • メッセージ用のProviderの作成1:53

    メッセージ用のProviderを作成します

  • StateProviderの作成3:58

    Flutterのプラグイン「Riverpod」の基本である状態管理のできるStateProvierを使って、カウンターを実装します

  • なぜConsumerを使うか1:11

    Flutterのプラグイン「Riverpod」のConsumerをなぜ使うか学習します。

  • Consumerに書き換える1:54

    Widget Treeの再構築の範囲を狭めるために、Flutterのプラグイン「Riverpod」のConsumerを実装します。

  • 全てConsumerに書き換える1:55
  • なぜreadを使うか2:31

    Flutterのプラグイン「Riverpod」のreadを学習します。

  • ConsumerStatefulWidget3:47

    Flutterのプラグイン「Riverpod」のConsumerStatefulWidgetを使って、全体を書き換えます

  • 【補習】readの挙動を確認8:48

    Riverpodのreadを使用したときのアプリのWidget再構築の挙動を確認します

  • 【補習】readの挙動を確認(Consumerを使用した例)9:41

    Riverpodのreadを使用したときのアプリのWidget再構築の挙動確認用のソースコードです。

Requirements

  • Flutterの基礎知識 (Widget, StatelessWidget, StatefulWidget)があること
  • Flutterの開発環境があること

Description

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を実装する方法を更新しました。

Who this course is for:

  • Flutterの状態管理を探している人
  • Flutterでソースがごちゃごちゃしちゃう人
  • Flutterでポリモフィズム(多態性)をマスターして、中級プログラマになりたい人

Report abuse