Managing State with the Scoped Model Pattern in Dart's Flutter Framework

What Will I Learn?

• You will learn how to make use of the scoped model pattern/plugin
• You will learn how to manage state in your widget tree
• You will learn how to create multiple instances of the same model
• You will learn how to build out flutter models

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

• Intermediate

Description

In this Flutter video tutorial, we take a look at the Scoped Model Plugin. The Scoped Model Plugin originated as a pattern found in Google's upcoming Fuchsia OS repository. Fuchsia makes use of Flutter in many of its native widgets and the Scoped Model pattern is used heavily in these widgets to manage their state. The Scoped Model pattern was transplanted from the Fuchsia repository into a plugin that can be used in other Flutter projects. This plugin is also the basis for the implementation of Flutter Redux that we looked at in an earlier tutorial.

Making use of the power of inherited widgets and Flutter's widget tree, Scoped Model injects a model into an upstream area of the user interface. We can then access this model from any widget that is below the initial Scoped Model Widget injection. In this way, we can also inject multiple models in different parts of the application which lets us isolate and organize the business logic and state of our applications.

In this specific tutorial, we start by looking at a fairly basic counter example. The counter example features one single counter that can be incremented or decremented. The model and state for this application is added into the User interface through the Scoped Model injection method. The tree for this first application is fairly linear and basic. We then move on to modularize the counter widget so that we can create multiple counters in the next application. This second counter application has a more complex widget tree and features multiple instances of the model. This application helps to display how we can maintain the state of multiple widgets without having to use a Stateful widget pattern.

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework
• The Basics of Animation with Dart's Flutter Framework
• Advanced Physics Based Animations in Dart's Flutter Framework
• Building a Drag and Drop Application with Dart's Flutter Framework
• Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
• Building a Temperature Conversion Application using Dart's Flutter Framework
• Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
• Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
• Building a Calculator Layout using Dart's Flutter Framework
• Finishing our Calculator Application with Dart's Flutter Framework
• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework
• Using the Different Style Widgets and Properties in Dart's Flutter Framework
• Composing Animations and Chaining Animations in Dart's Flutter Framework
• Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework
• Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework
• Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)
• Adding a Real-time Database to a Flutter application with Firebase
• Building a List in Redux with Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---