Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 20, 2022 10:04 am GMT

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. GetXAnd 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();});

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 {...}
  1. Pass another object named WidgetRef ref in build() method of ConsumerWidget()
class Home extends ConsumerWidget {  @override Widget build(BuildContext context, WidgetRef ref) {...}
  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 Herefinal helloTextProvider = Provider((ref) {  return "Hello Riverpod";}); class Home extends ConsumerWidget {  @override Widget build(BuildContext context, WidgetRef ref) {...}
  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()));      ),    );  }}

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 Herefinal 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 on 29th December 2020


Original Link: https://dev.to/chandramdutta/hello-flutter-with-riverpod-100-3hm7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To