The ability to teach yourself new technologies is an important skill to have. For my capstone project, my team has decided to build a mobile application using Flutter. I’ve built web applications throughout my time at OSU but this will by my first time building a mobile application. What’s great about Flutter is that it builds cross platform apps from a single codebase written in the programming language of Dart. Dart is an object and class oriented programming language that has a syntax similar to C. Fortunately, I’ve had a bit of exposure to C++ which has eased the learning curve a bit. However, there are still things that I haven’t encountered before.
A Flutter app is structured as a tree of these things called Widgets. Everything that you see on the screen of a Flutter app is a Widget. Some examples of Widgets are things like Row, Column, Text, Icons, Container, etc. So not all of them are visual objects. You determine what should be displayed by passing arguments to each Widget. So now that we have an idea of what Widgets are, we can discuss the two different types.
The two main types of Widgets are Stateful and Stateless Widgets. The definition I found for State is: “the information that can be read synchronously when the widget is built and might change during the lifetime of the widget” (source: geeksforgeeks). So my understanding is that State keeps track of some data that may be changed while interacting with the app. Lets say we have a screen with a Text Widget displaying the total number of times a button has been pressed. When you first press the Button Widget, you’re updating the State of the total to 1. When the State of the total is changed, Flutter rebuilds the Text Widget to reflect the updated total of 1. This screen is referred to as a Stateful Widget.
In the next post, we’ll continue discussing the differences between Stateful and Stateless Widgets.
