Flutter Data Provider : How to use in Flutter Web App

We’ve building a flutter web app with Firebase, Firestore, and Provider. Before we start building the app, let’s try to understand how we can use the provider package. In addition, we can also have a look at the flutter data provider pattern.

The flutter data provider primarily means how we can provide any type of data to our child widget. Right? 

In short we can pass any type of data across the screens.

However, we cannot equate it to passing data between screens.

Why?

Because we can pass data between screens. Certainly we can pass it without the Provider package, ChangeNotifierProvider, and ChangeNotifier.

Let’s make it simple. So a beginner can understand.

Suppose we want to pass a person’s name and age to the child widget.

However, we are not passing these data through class constructors. On the other hand we want to pass them through the provider.

As we want to use multiple providers, we will use the MultiProvider class property “providers”. 

This “providers” property expects many Provider classes with the defined data type.

Let’s see the code. That will explain it further.

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

import '../model/custom_theme.dart';
import 'second_app.dart';

class ClassTitle {
  late String title;
  ClassTitle(this.title);
}

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider<ClassTitle>(
          create: (context) => ClassTitle('John\'s Blog'),
        ),
        Provider<String>(
          create: (context) => 'John',
        ),
        Provider<int>(
          create: (context) => 23,
        ),
      ],
      child: MaterialApp(
        title: 'Angel\'s Blog',
        theme: CustomTheme.theme,
        home: const SecondApp(),
      ),
    );
  }
}

The above code explains how we have passed different data types. 

In short we can pass any data type. From String, integer to user defined class.

Let’s see the output. After that we’ll discuss how we have grabbed that data to display on the screen.

As the screenshot suggests, the app bar shows the user defined data. That means we have earlier defined it through the class constructor.

After that we have provided the data using provider.

What we’ve learned from Flutter data provider

Let’s see the further code where we have received the data.

That will explain what we have learned from flutter data provider pattern.

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'first_app.dart';

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

  @override
  Widget build(BuildContext context) {
    final title = Provider.of<ClassTitle>(context);
    final name = Provider.of<String>(context);
    final age = Provider.of<int>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(
          title.title,
          style: const TextStyle(
            color: Colors.black,
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Text.rich(
              TextSpan(
                text: 'Your name is ',
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                ),
                children: <InlineSpan>[
                  WidgetSpan(
                    alignment: PlaceholderAlignment.baseline,
                    baseline: TextBaseline.alphabetic,
                    child: ConstrainedBox(
                      constraints: const BoxConstraints(maxWidth: 100),
                      child: Text(
                        name,
                        style: Theme.of(context).textTheme.headline2,
                      ),
                    ),
                  ),
                  const TextSpan(
                    text: '.',
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 40.0,
            ),
            TextButton(
              onPressed: () {},
              child: Text(
                'Your age is $age',
                style: const TextStyle(
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                  backgroundColor: Colors.yellow,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The highlighted colours have pointed out how we have defined variables with providers that include certain types. And after that, we have used the variables where we need them.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter