The Meals app, developed in Flutter, empowers users to explore meal categories, access detailed meal information, view ingredients, and mark their favorite meals. This readme provides insights into the project setup and highlights the use of Riverpod, a state management library, to enhance the app's performance and maintain state.
To run the Meals app with Riverpod locally:
Clone the Repository:
git clone https://github.com/niyontwali/meals_app_with_riverpod.git
Install Dependencies:
cd meals_app_with_riverpod
flutter pub get
Run the App:
flutter run
This readme provides an introduction to the Meals app with Riverpod, highlighting key Riverpod concepts and classes used in the project. Dive into the code to see how Riverpod enhances state management and boosts the performance of the meal exploration app. For those interested in comparing state management approaches, the local state version of the app is available in a separate repository.
- Explanation:
Provider()
is used to create a provider that holds a piece of data. - Example:
final categoryProvider = Provider<String>((ref) => 'Italian');
- Explanation:
ref.watch
andref.read
are used to read data from providers.ref.watch
listens for changes and updates the widget, whileref.read
reads the current state without listening for changes. - Example:
final category = ref.watch(categoryProvider); final currentCategory = ref.read(categoryProvider);
- Explanation:
ProviderScope()
creates a new scope for providers, allowing the providers to be accessed within that scope. - Example:
void main() { runApp( ProviderScope( child: MyApp(), ), ); }
- Explanation:
StateNotifier
is a class that can hold and manage mutable state. - Example:
class CounterNotifier extends StateNotifier<int> { CounterNotifier() : super(0); void increment() { state++; } }
- Explanation:
StateNotifierProvider()
is used to provide aStateNotifier
to the widget tree, enabling access to its state. - Example:
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) { return CounterNotifier(); });
- Explanation:
WidgetRef
is an object provided by Riverpod that allows widgets to access providers. - Example:
Consumer(builder: (context, ref, child) { final count = ref.watch(counterProvider); return Text('$count'); })
- Explanation:
Ref
is a parameter provided in Riverpod functions likeProvider()
. It allows you to read and watch providers. - Example:
final category = Provider<String>((ref) => 'Italian'); final categoryName = ref.read(category); // Read the current value final categoryNameWatch = ref.watch(category); // Watch for changes
If you're interested in exploring the version of the Meals app that uses local state management (not Riverpod), you can check out the repository at https://github.com/niyontwali/meals_app. This repository provides a valuable resource for understanding how state management techniques differ between the two versions of the app.