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
Thank you for the contribution. It has been approved.
Excellent work @tensor.
You can contact us on Discord.
[utopian-moderator]
Thank you for moderating my contribution.
Hey @buckydurddle, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Sorry this not spam dude. if you don't like my coment, leave me, don't click downvote. I just try to be a good person here. Because i thing, when i Appreciating Some People & Their Creativity, That Is Same As Appreciate The Sweat Of Them. Plus leave your downvote @tensor i'm not a robot
I commented well about your post and then you gave me this ⬇️⬇️⬇️
Are you crazy ???
please unplug your downvote from my comment. don't you think your level is high so you can do that for everyone
If you keep polluting my content with your comments I will be forced to downvote all of these comments. This is the very definition of spam.
Up to you... I just ask you to unplug your downvote in my coment !!!
And you is don't my list friend anymore
Hey @tensor I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x