This repository contains simple and clean examples of how to use Riverpod in your Flutter applications for effective and scalable state management.

Riverpod is a robust and compile-safe state management library for Flutter, offering improved testability, modularity, and performance compared to other solutions.

A simple app that demonstrates how to use StateProvider to manage integer state.

• ✅ Increment & decrement functionality
• ✅ Live UI updates using ref.watch()

📂 Path: lib/examples/counter_app/

An interactive switch button example using StateProvider<bool>.

• ✅ Toggle switch state
• ✅ Reactive UI with ConsumerWidget

📂 Path: lib/examples/switch_btn/

An animated UI where a slider controls the opacity of a colored container using StateProvider<double>.

• ✅ Smooth slider interaction
• ✅ Real-time opacity change
• ✅ Clean and minimal implementation

📂 Path: lib/examples/slider_widget/

An advanced example managing multiple UI states using a single StateProvider with custom model class.

• ✅ Uses AppState model with copyWith()
• ✅ One provider, multiple sliders (Radial, Sweep, Linear)
• ✅ Each slider affects different gradient container in UI

📂 Path: lib/examples/multiple_states/

An elegant password input field with eye icon to toggle visibility. Built using StateNotifierProvider for managing input value and visibility state.

• ✅ Uses TextFieldState model with copyWith()
• ✅ Real-time preview of input text
• ✅ Toggle password visibility using eye icon
• ✅ Clean state separation in notifier

📂 Path: lib/examples/text_field_example/

A fully functional task management app using StateNotifierProvider for managing a list of tasks. This example demonstrates the use of advanced provider logic, separation of concerns, and widget composition.

• ✅ Add, edit, and delete todos
• ✅ Dynamic state management with StateNotifier
• ✅ Clean architecture using models, providers, widgets, and screens
• ✅ Responsive and minimal UI

📂 Path: lib/examples/todo_app/

lib/examples/todo_app/
│
├── models/
│   └── todo_model.dart          # Data model for todo items
│
├── providers/
│   └── todo_provider.dart       # StateNotifier managing todo list
│
├── screens/
│   ├── todo_screen.dart         # Main screen displaying todo list
│   └── add_edit_screen.dart     # Screen to add or edit a todo
│
├── widgets/
│   └── todo_tile.dart           # Reusable tile widget for todos
│
└── main.dart                    # App entry point

A real-world example of search, filter, and mark items as favourite using StateNotifierProvider. This app demonstrates how to:

• ✅ Manage a list of items with dynamic search and favourite toggle
• ✅ Implement clean filtering logic using a custom state class FavouriteStats
• ✅ Use PopupMenuButton for filtering between All & Favourite items
• ✅ Clean architecture with proper model and notifier separation
• ✅ Smooth UI updates and Riverpod logic separation

📂 Path: lib/examples/favourite_app/

lib/examples/favourite_app/
│
├── model/
│   └── item_model.dart           # Data model for each item
│
├── provider/
│   └── favourite_provider.dart   # StateNotifier managing item list, search, filter
│
└── screens/
    └── favourite_screen.dart     # Main screen with search field, filter, and UI

A practical example showing how to fetch user data from an API using FutureProvider. This demonstrates clean separation of network logic, model, provider, and UI.

• ✅ Uses FutureProvider to call REST API (https://reqres.in/api/users?page=2)
• ✅ Clean JSON to model conversion (UserModel, Data)
• ✅ Displays user name, email, and avatar in list
• ✅ Error and loading handling built-in

📂 Path: lib/examples/user_list_app/

lib/examples/user_list_app/
│
├── model/
│   └── user_model.dart           # Data model for User API response
│
├── provider/
│   └── user_list_provider.dart    # FutureProvider fetching user data
│
└── screens/
    └── user_screen.dart     # Screen displaying user list with avatar & name

An example showing how to use StreamProvider to handle real-time updates. This app displays the current time updating every second.

• ✅ Uses Stream.periodic to emit current DateTime every second
• ✅ Real-time updates on screen
• ✅ Demonstrates stream handling, loading & error state
• ✅ Fully responsive for any screen
• 🕓 Bold centered time (HH:MM:SS)
• 🌌 Dark gradient background
• ✨ Smooth glass-style card

📂 Path: lib/examples/time_app/

This example showcases the use of FutureProvider.family to dynamically fetch user details based on a passed userId. It demonstrates how to pass arguments to providers for reusable logic.

• ✅ Uses FutureProvider.family<User, int> for ID-based user fetching
• ✅ Fetches from REST API (https://reqres.in/api/users/{id})
• ✅ Navigates from user list to user detail screen
• ✅ Real-time loading, error, and data display
• ✅ Clean separation of model, provider, and screens

📂 Path: lib/examples/user_detail_app/

lib/examples/user_detail_app/
│
├── model/
│   └── user_detail_model.dart           # User model (id, name, email) 
│
├── provider/
│   └── user_detail_provider.dart    #fetching user by ID
│
└── screens/
    └── user_data_screen.dart # Shows detail of selected
    └── user_detail_list_screen.dart    # Screen with list of user IDs

A stylish bottom navigation bar app using StateProvider to switch between Home, Search, and Profile screens.

• ✅ Persistent navigation state
• ✅ Three tabs with icon & label
• ✅ Clean separation of logic using providers
• ✅ Responsive & minimal layout

📂 Path: lib/examples/bottom_nav/

lib/
└── examples/
    └── bottom_nav/
        ├── screen/
        │   └── bottom_nav_screen.dart
        ├── provider/
        │   └── nav_provider.dart
        └── pages/
            ├── home_page.dart
            ├── search_page.dart
            └── profile_page.dart

git clone https://github.com/Shehryar-dev/riverpod_example.git
cd riverpod_example
flutter pub get
flutter run

flutter_riverpod: ^2.4.0

More Riverpod examples will be added soon:

• 🛒 Cart Management
• 🎨 Theme Switcher
• 📍 Location Provider

Stay tuned!

Feel free to fork the repo and add your own examples. If you make something cool with Riverpod, submit a pull request!

Shehriyar Saleem
GitHub | LinkedIn