Hello Flutter with Riverpod 1.0.0!
Tags: flutter, riverpod, android, ios
Published: 2022-03-20 10:04:42

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.](https://riverpod.dev)

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();
}); 
```
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:
```

Wrap the root of your widget tree (`MyApp()` Class) with `ProviderScope()`
```
void main() {
  runApp(
    //Right Here👇
    ProviderScope(
      child: MyApp(),
    ),
  );
}
```
And don't forget to import riverpod in your .dart files
```
import 'package:flutter_riverpod/flutter_riverpod.dart';
```

### 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');
      ),
    );
  }
}
```
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 {
...
}
```
2. Pass another object named `WidgetRef ref` in `build()` method of `ConsumerWidget()`
```
class Home extends ConsumerWidget {
  @override
 Widget build(BuildContext context, WidgetRef ref) {
...
}
```
3. 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) {
...
}
```
4. 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()));
      ),
    );
  }
}
```

#### 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()));
      ),
    );
  }
}
```

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](https://chandramcodes.hashnode.dev/hello-flutter-with-riverpod-100) on 29th December 2020_