A new Flutter project using the Tabs Widget and the Provider Pattern

Clearly Innovative
Jun 19 · 3 min read

The Provider is the recommended method for managing state in the Flutter Application. It was presented at Google IO and is at the top of the stack for state management in the Flutter Documentation on State Management

Getting started

Be sure to add the provider package to your application. See complete documentation and instructions for use of this package here: https://pub.dev/packages/provider

Cart model service as application provider…

This provider is based on the example in the Flutter documentation.

We have a list containing Items and a way to add to the list. We want the ability to access this list from anywhere in the application and we want to perform specific actions, add to the list and have the changes force the application to redraw the appropriate widgets.

Setting up access to State

Since we need all of the child widgets to have access to our CartModel, we wrap the TabBarDemo widget with the ChangeNotfierProvider. You can get additional information on ChangeNotfierProvider

See ChangeNotifierProvider Documentation

Accessing State from top level to display count in the Cart Tab title

The Provider.of<CartModel>(context) looks up the widget tree for an object that matches the type CartModel and returns it to us. This then allows us access to exported objects, methods and properties that exists on the object.

Accessing State from the Catalog Tab when adding item to the cart

Similar to above, the Provider.of<CartModel>(context) looks up the widget tree for an object that matches the type CartModel and returns it to us. This then allows us access to the add method that exists on the model and we us it to add the item to the cart.

If you look back at the CartModel you will see that after the object is added to the list we call the method notifyListeners() this causes the widgets to be redrawn with the appropriate, updated values:

More Information On Getting Started with Flutter

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.


Better Programming

Advice for programmers.

Clearly Innovative

Written by

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade