Finishing our Calculator Application with Dart's Flutter Framework

What Will I Learn?

• You will learn how to pass callback functions as state through widgets
• You will learn how to make use of cases and switch statements in the Dart and Flutter
• You will learn how to refactor a flutter application to separate the state and the layout
• You will learn how to decouple the state of a flutter app from its layout

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 the last Flutter video tutorial, we built out a calculator layout using the expanded and the flex concepts among other ideas. In this tutorial, we finish this application by implementing most of the features and logic of the calculator. This is achieved by way of an inherited widget which passes around a callback function which is used to update the state of our stateful widget. We refactor the layout of our calculator so that it is in a stateless widget and then add an inherited widget to our widget tree below our calculator state widget. This allows us to simplify the logic of our application and make it so that we do not have to create multiple callback functions for every single one of our buttons. The use of the inherited widget also decouples the main state of the application from the layout in a way that makes it easy for the renderer tree to just re-render the components in use.

We also make use of the Dart switch keyword to let us filter through the various key presses that a user can preform in our calculator. This lets us apply behavior to our application based on the actions of the user. We save the values put into the calculator by the user through variables which are maintained by our inherited widget and then we also save the operator so that we know which operator the user wants to apply to these values. We also add functionality to allow the user to clear the display and all of the state from the application as well as functionality to allow the user to keep chaining multiple operations together.

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

---

Posted on Utopian.io - Rewarding Open Source Contributors

---