DEV Community

Chandram Dutta
Chandram Dutta

Posted on • Originally published at chandramcodes.hashnode.dev

Hello Flutter with Riverpod 1.0.0!

#flutter #riverpod #android #ios

State Management in Flutter is an important topic not to be overlooked. Obviously, you can't just use set state(); throughout a project consisting of 3000 lines of code over 20 different files! There are many approaches in Flutter that you can use for managing your state and for dependency injection.

Some of the Darttastical State Management Approaches are:

  1. BLoC
  2. Riverpod
  3. GetX And many more...

Note: I am not including Provider as Riverpod is a better version of Provider itself.

So Now let's understand Riverpod.

As I mentioned before, Riverpod is an improved version of Providers and hence, Providers play an important role in Riverpod.
What are Providers tho...

final thisIsProvider = Provider((ref) {
  return MyValue();
});
Enter fullscreen mode Exit fullscreen mode

The final thisIsProvider is the declaration of the variable. The Provider(); comes from Riverpod Class. MyValue() refers to object that our Provider is returning. It could be a string, int, or any other data type.

To understand more vividly using real code examples let's learn to import riverpod.

Installing Riverpod

There are 3 types of riverpod

  1. riverpod to be used only with Dart
  2. flutter_riverpod when we use Flutter and riverpod
  3. riverpod_hooks when we use flutter_hooks in our flutter Project.

For this blog, we will use flutter_riverpod

In pubspec.yaml Under dependencies add flutter_riverpod

dependencies:
  flutter_riverpod:
Enter fullscreen mode Exit fullscreen mode

Wrap the root of your widget tree (MyApp() Class) with ProviderScope()

void main() {
  runApp(
    //Right Here👇
    ProviderScope(
      child: MyApp(),
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

And don't forget to import riverpod in your .dart files

import 'package:flutter_riverpod/flutter_riverpod.dart';
Enter fullscreen mode Exit fullscreen mode

Let's play with riverpod now

Ok...so after all this, let's actually use the riverpod with a basic Provider().

Copy the following code

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          return Text('Riverpod says Hello');
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

The code is self-explanatory to any flutter developer with basic knowledge of flutter with changes that we discussed before while installing riverpod. Now we will use riverpod's Provider to display the text in the Text() in the Center() of the Scaffold()

  1. Change StatelessWidget() to ConsumerWidget() 
class Home extends ConsumerWidget {
...
}
Enter fullscreen mode Exit fullscreen mode
  1. Pass another object named WidgetRef ref in build() method of ConsumerWidget() 
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}
Enter fullscreen mode Exit fullscreen mode
  1. Now let's create a Provider() the most basic of all. 
void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}
//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}
Enter fullscreen mode Exit fullscreen mode
  1. Let's watch() our helloTextProvider() 
class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
//Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

The Final Code 

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
//Don't forget to wrap MyApp() with ProviderScope()
    const ProviderScope(child: MyApp()),
  );
}

//Right Here😉
final helloTextProvider = Provider((ref) {
  return "Hello Riverpod";
}); 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod')),
      body: Center(
        child: 
          //Over here Brother and Sisters😊,
          return Text(ref.watch(helloTextProvider()));
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

And Congrats🎉🎉, you made your first Riverpod App(if it runs successfullly🤭😉) .

In my next blog, we will learn to use StateProvider() where you will actually get to know the advantages of flutter_riverpod.
Till that Oh Boy! you all need to wait!

Originally published on Hashnode on 29th December 2020

Top comments (0)

Read next

parthprajapatispan profile image

AR Surface Detection and Virtual Object Placement in Android Apps

Parth -

aadarshk7 profile image

Animation in Flutter

Aadarsh Kunwar -

suamirochadev profile image

Como fazer deploy no vercel com o seu app web flutter

Suami Rocha -

evgensuit profile image

How to implemented pull to refresh in Jetpack Compose

Yauheni Mookich -