Modern Template for Riverpod 2.0 Projects in Flutter

GitHub - Erengun/Flutter-Riverpod-2.0-Template: A flutter template with Riverpod 2.0, Freezed, Go…

If you’re a Flutter developer looking for a solid starting point for your projects with Riverpod 2.0, Freezed, Go Router, Hive, Easy Localization, and more, look no further! In this blog post, we’ll introduce you to the Flutter Riverpod 2.0 Template, a comprehensive boilerplate that incorporates these technologies and best practices to kickstart your app development journey.

Introduction

Creating a new Flutter project from scratch can be time-consuming, and setting up the right architecture and packages can be daunting. That’s where the Flutter Riverpod 2.0 Template comes in. This template provides you with a robust foundation for your Flutter projects, complete with state management, routing, storage, localization, and more.

Features at a Glance

• State Management with Riverpod 2.0: Say goodbye to traditional state management headaches with Riverpod 2.0. It offers a more intuitive and declarative way to manage your app’s state.
• Immutable State with Freezed Annotations: Freezed annotations help you define immutable state models and automatically generate serialization/deserialization methods.
• Smooth Routing with Go Router: Go Router simplifies your routing needs and adds beautiful fade and slide transitions for a polished user experience.
• Stricter Linting with Flutter Lints: Keep your codebase clean and maintainable by adhering to stricter linting rules.
• Platform-Independent Storage using Hive: Store your data in a platform-independent manner with Hive, which also supports web applications.
• High Refresh Rate Display Support: Flutter Displaymode package ensures your app looks great on high refresh rate displays.
• Effortless Localization with Easy Localization: Easy Localization streamlines the localization process, making it easier to support multiple languages.
• Modern Icon Library with Ionicons: Enhance your app’s aesthetics with a comprehensive and modern icon library.

Included Pub Packages

Here are some of the key pub packages integrated into this template:

• Flutter Riverpod
• Riverpod Annotation
• Freezed Annotation
• Go Router
• Get It
• Flutter Lints
• Path Provider
• Flutter Displaymode
• Easy Localization
• Hive
• Url Launcher
• Ionicons

These packages provide a solid foundation for your app’s architecture, user interface, and functionality.

Getting Started

To use the Flutter Riverpod 2.0 Template as a starting point for your project, follow these steps:

1. Clone or download the template from the GitHub repository.
2. Customize the screens, widgets, and functionalities to match your app’s requirements.
3. Update the package and app names according to your project by following the instructions provided in the StackOverflow issue linked in the documentation.
4. Leverage the power of Riverpod 2.0 and Freezed annotations for seamless state management.
5. Utilize Go Router for smooth and animated routing transitions.
6. Implement platform-independent storage with Hive.
7. Take advantage of Easy Localization for effortless app localization.

Setting Up State Management with Riverpod and Freezed

1. Define Immutable State using Freezed

First, let’s define the immutable state model for your app using Freezed annotations. In this example, we’ll create a simple counter state:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'counter_state.freezed.dart';
part 'counter_state.g.dart';

@freezed
abstract class CounterUiModel with _$CounterUiModel {
  const factory CounterUiModel({
    @Default(0) int count,
  }) = _CounterUiModel;

 factory CounterUiModel.fromJson(Map<String, dynamic> json) =>
      _$CounterUiModelFromJson(json);
}

The @freezed annotation generates serialization/deserialization methods and constructors for your immutable state class. The @Default annotation sets a default value for the count attribute.

2. Create a Logic Class for State Management

Next, create a logic class that extends StateNotifier from Riverpod. This class will handle the state and logic associated with the counter:

import 'package:riverpod/riverpod.dart';
import 'counter_ui_model.dart'; // Import the state model created earlier

part 'counter_logic.g.dart'; // Generated code

@riverpod
class CounterLogic extends _$CounterLogic {
  @override
  CounterUiModel build() {
    // Initialize the state when the provider is first initialized
    return CounterUiModel(count: 0);
  }

void increment() {
    // Update the state when the increment method is called
    state = state.copyWith(count: state.count + 1);
  }
}

In this class, the build() method initializes the state, and the increment() method allows you to update the count.

3. Generate Providers with Build Runner

Run the following command to generate the providers for your logic class:

dart run build_runner build

This command generates the necessary provider code for you, which you can then use in your widgets.

4. Use the Provider in Widgets

Now that you have your logic class set up, you can use the generated provider in your widgets:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_template/logic/counter_logic.dart'; // Import the logic class

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counterState = ref.watch(counterLogicProvider); // Use the generated provider
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Count: ${counterState.count}'),
        ElevatedButton(
          onPressed: () {
            ref.read(counterLogicProvider.notifier).increment(); // Call the increment method
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

In this example, counterLogicProvider is the generated provider for your CounterLogic class. By calling ref.watch(counterLogicProvider) and ref.read(counterLogicProvider.notifier), you can access the state and methods provided by the logic class.

Conclusion

The Flutter Riverpod 2.0 Template provides a solid foundation for your Flutter projects by incorporating essential packages and best practices. With state management, routing, storage, and localization all built-in, you can focus on building engaging and feature-rich apps without worrying about setup.

To get started with this template, simply clone the repository and customize it according to your project’s needs. By leveraging Riverpod 2.0, Freezed annotations, Go Router, and more, you’ll be well on your way to creating high-quality Flutter applications.

Happy coding! 🚀