DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Chandram Dutta
Chandram Dutta

Posted on • Originally published at chandramcodes.hashnode.dev

Hello Flutter with Riverpod 1.0.0!

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)

🌚 Life is too short to browse without dark mode