Flutter State Management: Movie App with Provider, Riverpod, flutter_bloc & more

Last update: Jun 26, 2022

Flutter State Management: Movie App with Provider, Riverpod, flutter_bloc & more

This reference project shows how to implement a (Netflix-inspired) movie app with different state management techniques in Flutter:

Movie app preview

The project uses the TMDB API to fetch a list of movies, and includes features such as pagination and local storage.

Running the project

Before running, see instructions on how to get a TMDB API key.

Also, make sure to run on Flutter beta channel.

App Overview

The application is composed by three primary screens: Now Playing, Favourites and Profiles.

On first launch, the app asks the user to create a profile.

The Now Playing page loads a list of current movies from the TMDB API. Results are paginated and scrolling to the bottom causes the next page to be loaded.

Each movie shows as a poster using the image URL retrieved from the API. You can tap on the ❤️ icon to add a movie as a favourite (for the selected profile), and this preference is persisted to local disk.

Open the Favourites page to see the list of favourites for the currently selected profile.

Use the Profiles page to create additional profiles and update the currently selected profile (this is inspired by the Netflix UI).

Features

  • "Now Playing" movies (with pagination)
  • Save favourites to watch list
  • Multiple profiles (like Netflix)
  • Local data persistence (movies, favourites, profiles) with Sembast

Combining these features together makes for an interesting case study about state management in Flutter.

App Structure

This app was made to compare and contrast multiple state management approaches. A highly composable architecture has been designed to enable this.

The project folders are structured like this:

/apps
  /flutter_bloc
  /riverpod
  /provider
  ... and more
/packages
  /core
    /lib
      /api
      /models
        /app_models
        /app_state
        /tmdb
      /persistence
      /ui

Each folder inside apps is a Flutter project that implements the same app with a specific state management package.

All common functionality lives in packages/core. This includes a TMDB API wrapper, along with model classes with supporting serialization code where needed.

The persistence folder contains a DataStore abstract class that is used by all apps, along with a concrete SembastDataStore class to read and write data to local storage (using Sembast as a NoSQL database).

The ui folder contains all the custom widgets that are shared by all apps. These widgets do not hold any business logic and are designed to show the app UI and expose callbacks for the application code to plug into (much like the built-in Flutter widgets).

All the logic lives inside the apps themselves. All apps have exactly the same folders:

lib
  /app
    /app_startup
    /create_profile
    /favourites
    /now_playing
    /profile_selection

The business logic and screen flows are identical for each app, but the semantics change depending on which state management package is used. This makes it easy to compare and constrast different solutions.

Supported state management solutions

The current state management solutions are currently supported:

I plan to add more in the future (PRs welcome!).

Future Roadmap

  • Add more screens
  • Polish the UI
  • Replace http with dio to support request cancellation

Feel free to open issues if you'd like certain features to be implemented (though keep your expectations low, I'm doing this for free after all 😉 ).

Other packages in use

The "core" package of the app uses the following packages:

Getting a TMDB API key

This project uses the TMDB API to get the latest movies data.

Before running the app you need to sign up on the TMDB website, then obtain an API key on the settings API page.

Once you have this, create an api_keys.dart file inside packages/core/lib/api, and add your key:

// api_keys.dart
String tmdbApiKey = "your-api-key";

Congratulations, you're good to go. 😎

Note: Loading images from insecure HTTP endpoints

The data returned by the TMBD API points to image URLs using http rather than https. In order for images to load correctly, the following changes have been made:

Android

Created a file at android/app/src/main/res/xml/network_security_config.xml with these contents:

">


   
    
    

   

Added this to the application tag in the AndroidManifest.xml:

android:networkSecurityConfig="@xml/network_security_config"

iOS

Add the following to ios/Runner/info.pList:

  
   
    NSAppTransportSecurity
   
  
   
      
    
     NSAllowsArbitraryLoads
    
      
    
  
   

More information here:

Credits

This project was inspired by flutter_architecture_samples by the Flutter community.

LICENSE: MIT

GitHub

https://github.com/bizz84/movie_app_state_management_flutter
Comments
  • 1. `Pub Get` is failed

    I try to run one of your sample (riverpod) but the Pub Get is failed

    Running "flutter pub get" in riverpod...                        
    Because movie_app_demo_flutter depends on integration_test any from sdk which doesn't exist (could not find package integration_test in the Flutter SDK), version solving failed.
    
    pub get failed (server unavailable) -- attempting retry 1 in 1 second...
    

    Seeing an answer in Stackoverflow, I try to comment out integration_test

    dev_dependencies:
    #  integration_test:
    #    sdk: flutter
    

    But then, get new issue

    Running "flutter pub get" in riverpod...                        
    
    
    The current Dart SDK version is 2.10.4.
    
    Because movie_app_demo_flutter depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.
    pub get failed (1; Because movie_app_demo_flutter depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.)
    Process finished with exit code 1
    

    My Flutter Doctor is:

    [✓] Flutter (Channel stable, 1.22.5, on macOS 11.2 20D64 darwin-x64, locale en-VN)
        • Flutter version 1.22.5 at /Users/trietbui/Library/flutter
        • Framework revision 7891006299 (8 weeks ago), 2020-12-10 11:54:40 -0800
        • Engine revision ae90085a84
        • Dart version 2.10.4
    

    Can you share with me your Flutter Doctor too?

    Reviewed by anticafe at 2021-02-06 01:06
  • 2. Remove States Rebuilder example

    @GIfatahTH I removed States Rebuilder (see #5) as I couldn't work out how to update to the new API.

    If you want to take on this, you can revert this PR, do the Null Safety migration, and update to the new APIs.

    Reviewed by bizz84 at 2021-12-18 10:06
  • 3. states_rebuilder implementation

    First of all, I would like to thank you for your efforts and contributions in making the flutter community better. I also appreciate being open to other state management solutions. This is my contribution to your project. It consists of a states_rebuilder implementation. It should be noted that:

    • I did not touch the core part. I took it as it is and just consume it.
    • By default, states_rebuilder tracks the state status and exposes six flags:
    • isIdle: after the state is first created and before any operation (virgin status).
    • isWaiting: When the state is waiting for an async task (Future or Stream).
    • hasError: If the state caught an exception.
    • hasData: when the state is mutated successfully with valid data
    • isDone: when the state's stream is done.
    • isActive: changed manually to mark whether the state is active or not.
    • If the sole purpose of using Freezed is to track one of the six state status, then it is no longer necessary to use it.
    • I do not use favouriteMovies that use RxDart. Instead, I combined two injected states.
    • All the functionalities of the app are tested.
    Reviewed by GIfatahTH at 2021-03-13 22:35
  • 4. ProfileData when initializing state in riverpod

    Reviewed by jagare at 2021-07-02 13:18
  • 5. Allow posterPath to be null

    posterPath can be null. It happens on page 8 when scrolling. The result is a "'Null' is not a subtype of type 'String'". This pull request change the model file and necessary widgets. BTW: Andrea, thank you very much for a very good example of state management! You are awesome!

    Reviewed by jagare at 2021-07-02 12:47
  • 6. A bunch of errors

    For example sembast_data_store.dart line 157 `The value

    The return type 'dynamic' isn't a 'bool', as required by the closure's context.dart(return_of_invalid_type_from_closure)`

    flutter doctor -v

    [√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Version 10.0.18363.1440], locale en-US) • Flutter version 2.0.2 at C:\src\flutter • Framework revision 8962f6dc68 (6 days ago), 2021-03-11 13:22:20 -0800 • Engine revision 5d8bf811b3 • Dart version 2.12.1

    [√] Android toolchain - develop for Android devices (Android SDK version 30.0.0-rc2) • Android SDK at C:\Users\Teq\AppData\Local\Android\sdk • Platform android-30, build-tools 30.0.0-rc2 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

    [√] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

    [√] Android Studio (version 4.1.0) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

    [√] IntelliJ IDEA Ultimate Edition (version 2020.1) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2020.1 • Flutter plugin version 45.1.3 • Dart plugin version 201.7223.43

    [√] VS Code, 64-bit edition (version 1.54.3) • VS Code at C:\Program Files\Microsoft VS Code • Flutter extension version 3.20.0

    [√] Connected device (4 available) • Pixel 3a (mobile) • 93GAY0B28F • android-arm64 • Android 11 (API 30) • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator) • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.82 • Edge (web) • edge • web-javascript • Microsoft Edge 89.0.774.50

    Reviewed by smakarov at 2021-03-17 11:08
  • 7. How is the performance testing across 3 state management?

    Performance is crucial as still a lot of low RAM android devices or old iOS devices that start lagging. I tried provider, as observed, a lot of rebuilds.

    Reviewed by maplerichie at 2021-01-25 08:53

Related

Movie Database app - A Flutter app project that allows users to search for a movie or tv series
 Movie Database app - A Flutter app project that allows users to search for a movie or tv series

Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & episode, and save watchlist.

Jun 19, 2022
Building a simple Flutter app for practicing and understanding the GetX State Management and Route Management.

GetX State Management Demo with full understanding of State Management (with GetBuiler, GetX, Obx), Route Management and SnackBar.

May 19, 2022
Flutter food app using flutter_bloc
Flutter food app using flutter_bloc

kamelfoodapp A new Flutter project. Getting Started Why bloc? Business logic components (BLoC) allow you to separate the business logic from the UI. W

May 5, 2022
Flutter app To list down your Daily task ,made using State manager i.e. Provider package
Flutter app To list down your Daily task ,made using State manager i.e. Provider package

Flutter app To list down your Daily task ,made using State manager i.e. Provider package

Jan 23, 2022
(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.
(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

May 10, 2022
A simple fully working weather app with state management build using flutter.
A simple fully working weather app with state management build using flutter.

A simple fully working weather app with state management build using flutter.

Apr 12, 2022
Flutter shopping app with Getx for State management, Dio for APIs and Hive for the local database.
Flutter shopping app with Getx for State management, Dio for APIs and Hive for the local database.

Created By Sajjad Javadi Email: [email protected] Show some ❤️ and star the repo to support the project Flutter Shopping app example In this pr

Mar 28, 2022
A recipe book app, made with Flutter and architected with clean architecture, using the MobX as state management.

recipe_book_app A new recipe book Flutter project, architected with clean architecture and state managed with MobX. Bases: Idea inpsired by Recipe-App

Jan 5, 2022
Complete Flutter app example, with AsyncRedux state management

Complete Flutter app example, with AsyncRedux state management. Can also be used as a template to start a new project.

May 17, 2022
FREE FLUTTER QUIZ APP WITH GETX STATE-MANAGEMENT
FREE FLUTTER QUIZ APP WITH GETX STATE-MANAGEMENT

This is free code for a flutter quiz app. all you need is just set up firebase for this project. Home

Jun 19, 2022
A demonstration of using Riverpod for dynamic locale switching in-app
A demonstration of using Riverpod for dynamic locale switching in-app

Riverpod Localization A demonstration of using Riverpod for dynamic locale switching in-app, with persistence. How It Works Fallback Locale: Declared

Jun 18, 2022
A social media application developed using Flutter and GetX state management

A social media application developed using Flutter and GetX state management

Jun 23, 2022
Movie Info App - Flutter UI
 Movie Info App - Flutter UI

Movie Info App - Flutter UI Watch it on YouTube Packages we are using: flutter_svg: link animations: link We design two pages one is the home page and

Jun 23, 2022
Flutter Movie App
Flutter Movie App

Flutter Movie App Download Apk Demo App Video Code Structure Video Project Features The features I'm implemented.

Mar 12, 2022
🎥 A beautiful movie application build by flutter.
🎥 A beautiful movie application build by flutter.

notice: 豆瓣接口已全部无法使用,本项目也无法正常运行,近期打算更换为 imdb 的接口 ?? Morec - Flutter 版电影应用 English 这是一个非常精美的 Flutter 版电影客户端,利用豆瓣现有的 Api,打造了一个完整的电影展示 App。细节十分完善,是一个经过完整设

Jun 20, 2022
BMI App - The personal documentation while learning Multi Provider with Flutter by making BMI Calculator app
BMI App - The personal documentation while learning Multi Provider with Flutter by making BMI Calculator app

BMI App - The personal documentation while learning Multi Provider with Flutter by making BMI Calculator app

Feb 13, 2022
To do and accomplishment app built with Flutter and Dart. Made use of Provider

Todioapp A todo and accomplishment app built with Flutter Getting Started This project is a starting point for a Flutter application. A few resources

Nov 15, 2021
Shopping App developed using Flutter and Dart making use of Provider, Carousel Library, Google FireStore

Shopping App developed using Flutter and Dart making use of Provider, Carousel Library, Google FireStore. It's featuring standard modern shopping app UI

Jan 7, 2022
A simple app to make Flutter development more delightful
A simple app to make Flutter development more delightful

Flutter Sidekick Sidekick is an app that provides a simple desktop interface to tools that enhance Flutter development experience to make it even more

Jun 23, 2022