Riverpod State Mgmt for Flutter. StateProviders, StateNotifierProviders, FutureProviders, StreamProviders, autodisposed and families, and everything in-between.

Overview

Flutter Riverpod Learning/Reference zone

A Null-Safety flutter project acting as a learning/code reference zone

Based on

  • Riverpod (v1/v2)
  • Page Transitions
  • Math Expressions
  • Flex Color Scheme

Screenshot 1 Screenshot 3 Screenshot 2

Resources

  1. App Structure by Code With Andrea
  2. Feature-first or layer-first?
  3. Riverpod Docs

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

NB: To view Google Ads, switch to the googleads branch as it does not work with the web version.

Launcher Icons

flutter pub run flutter_launcher_icons:main

Updating Splash Image

Using the flutter_native_splash package

flutter pub run flutter_native_splash:create

Architecture/Project Structure

The base sturcture is based on Code With Andrea's app structure. It offers a sweet spot between feature-first and Layer first approach, which -honestly- makes a lot more sense.

However, after building several prototypes (small quick apps), the structure feels augmented towards a Bloc-like architecture, where it begins to feel like there are too many files & folders for even the simplest of tasks.

The latest architecture features a somewhat better and more flexible architecture, offering a sweet spot between feature-first, layer-first, and Code with Andreas's architectures.

NB: Check the real folder structure contained in this project for a better visual understanding.

Changes include:

  • Renamed presentation -> ui: No need to name the presentation layer presentation. It's too lengthy and what we hate as devs is writing too much!
  • Renamed controllers -> providers. We're dealing with providers after all, aren't we?
  • Renamed services -> repositories. However, if you prefer naming yours services, well and good. The key point here is be CONSISTENT in your project. We will use repositories as it's the most popular convention.
  • StateNotifier states(classes) moved from providers files to individual models folder.
  • enums moved to data. For a Clean architecture, it would be better keeping all enums on their own and not in providers. It becomes easier to maintain the project in the long run.
  • Merged application, domain, controllers/providers -> data. Any state has been separated from the ui. Any piece of state/logic has been moved out of the presentation/ui folder.
  • Any form TextEditingController be used inside a StatefulHookConsumerWidget via useTextEditingController. Riverpod Hooks combined with Flutter Hooks are a fantastic way for handling such use-cases. Same goes for animations, pageControllers, e.t.c. found in the flutter hooks package. Form Validation can be done via the validators package, or for more complex validation, the providers can handle that (StateNotifiers) - Or however you deem fit 🤷‍♂️
  • Inside the ui, any Screen must be suffixed with Screen e.g. OrdersScreen. Any other widget should be viewed as a partial/widget/fragment to the main screen, and, therefore, can be re-used multiple times in the entire project - not just by the feature. Screens, on the other hand, cannot be re-used in other widgets.
  • Flexibility:
    • If a feature only requires a screen and a provider, the folder structure then can be:
      • ui
      • providers
    • If a feature requires a screen, a provider, and a state/model/state notifier class, the folder structure then can be:
      • ui
      • data
        • providers
        • models
    • If a feature requires a screen, a provider, a state/model/state notifier class, and enums, the folder structure then can be:
      • ui
      • data
        • providers
        • models
        • enums
    • If a feature requires a screen, a provider, a state/model/state notifier class, enum, and repository, the folder structure then can be:
      • ui
      • data
        • providers
        • models
        • enums
        • repositories
        • exceptions

For apps that have an admin and user dashboard, this architecture gets in line with the current architecture:

  • main.dart
  • src
    • app_routes.dart
    • common_widgets
    • utils
    • features
      • onboarding
      • splash
      • home
      • auth
      • admin
        • dashboard
        • orders
        • invoices
        • reports
      • user
        • dashboard
        • orders
        • cart
        • invoices

and each fature can then follow the guidelines above. The ui and data can now be tested individually.

NB: Check the real folder structure contained in this project for a better visual understanding.

Links

You might also like...

A flutter package that developers have pretty logs instead just printing everything like a newbie

A flutter package that developers have pretty logs instead just printing everything like a newbie. Features Makes it easy to log to console without us

Nov 28, 2021

Aris imageexmii - Learn everything about images such as adding filters, borders & different shapes

Aris imageexmii - Learn everything about images such as adding filters, borders & different shapes

Flutter Tutorial - 2/2 Image - Deep Dive Learn everything about images such as a

Dec 29, 2021

Ever want to create a quick form without wiring everything up? This might be the library for you.

Ever want to create a quick form without wiring everything up? This might be the library for you.

Sep 13, 2022

Scale the entire UI design proportionally. Button, image, font, everything is scaled automatically

Scale the entire UI design proportionally.  Button, image, font, everything is scaled automatically

Scale the entire UI design proportionally. Button, image, font, everything is scaled automatically. Before: 250x250 square is the same size across dev

Sep 25, 2022

Practice building basic animations in apps along with managing app state by BLoC State Management, Flutter Slider.

Practice building basic animations in apps along with managing app state by BLoC State Management including: Cubit & Animation Widget, Flutter Slider.

Jun 8, 2022

An extension to the bloc state management library which lets you create State Machine using a declarative API

An extension to the bloc state management library which lets you create State Machine using a declarative API

Nov 28, 2022

A powerful state machine for MobX management, that can be used in almost any application state.

A powerful state machine for MobX management, which can be used in almost any application state. It has 3 states - loading, success, error - and is pe

Oct 31, 2022

Flutter theme demo using riverpod and shared preferences

flutter_theme_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Dec 27, 2021

A flutter project containing riverpod, flutter_lints, hive, easy_translations and more!

 A flutter project containing riverpod, flutter_lints, hive, easy_translations and more!

Flutter Production Boilerplate Riverpod A flutter project containing riverpod, flutter_lints, hive, easy_translations and more! This repository is the

Dec 27, 2022
Owner
Lexx YungCarter
Manners Maketh Man!
Lexx YungCarter
Riverpod Messages Listener: A message notification listener for apps build with Riverpod

Riverpod Messages Listener Hello all, this is the home page of riverpod_messages package, a message notification listener for apps build with Riverpod

Fabrizio Tognetto 4 Dec 8, 2022
State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Flutter Community 70 Sep 28, 2022
Shopify Tag and Product Management App using Flutter and Riverpod State Management

Myshopify App A Simple Flutter Application project to get List of Tags, Products and Product Details from shopify https://shopicruit.myshopify.com/adm

Idowu Tomiwa 5 Nov 12, 2022
Multiplayer tictactoe game made in Flutter with nodejs and socket.io and using riverpod for state management

TicTacToe Game A Multiplayer TicTacToe Game- Works on Android, iOS and Web. Features Create/Join Room Play Realtime Display Points Round & Game Winner

Utsav Ghimire 5 Oct 18, 2022
A Flutter application that allows interacting with Pokemons, built using Clean Archtitecture structure and riverpod as state management.

pokedex Welcome to the Pokedex project! Getting Started Instructions to run: This project uses flutter version 3.0.3, Make sure you have that version

null 25 Nov 22, 2022
This is a practical guide to MVVM architecture in flutter with riverpod for state management.

flutter_mvvm This project is a practical guide to MVVM pattern in flutter with Riverpod. Install flutter Get your APIKEY from https://api.openweatherm

Augustine Victor 3 Jan 1, 2023
Riverpod University. App that shows my way of dealing with state management in Flutter.

Riverpod University A Flutter project that showcases Riverpod possibilities created with https://flutlab.io Realized thusfar: Counter, Light/Dark butt

:plotsklapps 5 Dec 18, 2022
Arisprovider - A mixture between dependency injection (DI) and state management, built with widgets for widgets

A mixture between dependency injection (DI) and state management, built with wid

Behruz Hurramov 1 Jan 9, 2022
An app to show everything bus related in Singapore, including arrival times and a directory

NextBus SG An app to show everything bus related in Singapore, including bus arrival times and a directory, with extra features. ?? Gallery Click here

null 103 Sep 13, 2022
Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

osum_serializable The goal is to serialize almost everything you ever need! json_serializable is an amazing package to serialize classes but cannot se

Aswin Murali 2 Sep 23, 2022