Get immediate access to this and over 1,500+ other videos and books.

Boost your skills with a raywenderlich.com Beginner subscription. With over 60+ video courses and our core foundational programming books bundled in one subscription, it’s simply the best investment you can make in your development career.

Use Multiple Providers

This video was last updated on Sep 22 2022

Learn how to take multiple different providers and combine them into a single multiprovider that makes your code easier to read.

Contributors

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

So far we’ve been using one provider to access our model, but chances are, you’ll have lots of different models in your app. In such a case, we need to use multiple providers. Now, can nest providers much the same way as we nest widgets.

import 'package:flutter/material.dart';
import 'pillar.dart';
abstract class Domain extends ChangeNotifier { 

}
  final Pillar pillar;
  Domain(this.pillar);
void increaseArticleCount({int by = 1}) {
    pillar.increaseArticleCount(by: by);
    notifyListeners();
}

int get articleCount => pillar.articleCount;
String get imageName => pillar.type.imageName;
Color get backgroundColor => pillar.type.backgroundColor;
class Flutter extends Domain {
  Flutter(super.pillar);
}

class Android extends Domain {
  Android(super.pillar);
}

class Swift extends Domain {
  Swift(super.pillar);
}
import 'models/domain.dart';
body: MultiProvider(
    providers: [
    ChangeNotifierProvider<Flutter>(
        create: (context) => Flutter(
        Pillar(
            type: PillarType.flutter,
            articleCount: 115,
        ),
        ),
    ),
    ChangeNotifierProvider<Android>(
        create: (context) => Android(
        Pillar(
            type: PillarType.android,
            articleCount: 282,
        ),
        ),
    ),
    ChangeNotifierProvider<Swift>(
        create: (context) => Swift(
        Pillar(
            type: PillarType.swift,
            articleCount: 608,
        ),
        ),
    )
    ],
import '../models/domain.dart';
return Consumer3<Flutter, Android, Swift>(
        builder: (_, flutter, android, swift, __) {
...
        ); // Column
      } 
    ); // Consumer3
var totalArticles =
          android.articleCount + flutter.articleCount + swift.articleCount;
Padding(
    padding: const EdgeInsets.only(top: 24.0),
    child: Text(
        'Total Tutorials: $totalArticles',
        style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
    ),
)
const TutorialWidget({required this.domain, super.key});
final Domain domain;
InkWell(
  onTap: () {
    widget.domain.increaseArticleCount();
  },
  child: Image.asset('assets/images/${widget.domain.imageName}',
    width: 110, height: 110),
CircleAvatar(
            backgroundColor: widget.domain.backgroundColor,
            child: Text(widget.domain.articleCount.toString()),
          ),
  Widget build(BuildContext context) {
    return Stack(
      ...
    );
  }
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TutorialWidget(
            domain: flutter,
          ),
          TutorialWidget(
            domain: android,
          ),
          TutorialWidget(
            domain: swift,
          ),
        ],
      ),
    ),

Reviews

Comments