My Flutter Adventure — Widgets!
In my previous post, we looked how looks like the Flutter and we installed Flutter SDK and development tools. You can read from here.
Before we start the coding our apps with Flutter, we need to understand widgets structure for creating beautiful UI’s.
MaterialApp class
An application that uses material design in Flutter. A convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper. In order to use it, we need to create a new instance inside the runApp method.
You can see the all MaterialApp attributes from here.
Widgets
As we said in the last post Everything is a widget in Flutter! A widget in Flutter represents an immutable description of part of the user interface; all graphics, including text, shapes, and animations are created using widgets.
The Flutter contains two sets of widgets which conform to specific design languages. Material Design widgets implement Google’s design language of the same name, and Cupertino widgets imitate Apple’s iOS design.
“Widgets are basically blocks for creating UI(Buttons, TopBar, Drawer, Cards…)”
Before creating the UI, we had to decide “Will we have a dynamic or static textbox? ” After that, we have chosen which widgets will be more useful for us. We have two types of WD, Stateless and Stateful.
Stateless Widgets
A Stateless widget has no internal state to manage. Icon, IconButton, and Text are examples of stateless widgets, which subclass StatelessWidget.
Stateless widgets are immutable, meaning that their properties can’t change(all values are final).
Build method in the example above is returning a Scaffold which is a Widget implementing a Material Design layout basic structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
Stateful Widgets
A stateful widget is dynamic. The user can interact with a stateful widget (by typing into a form, or moving a slider, for example), or it changes over time (perhaps a data feed causes the UI to update). Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets, which subclass StatefulWidget.
In this example a floating button is added and by the time it is pressed the method _incrementCounter will be called.
When updating the state, the build method is called again and another text is built with the new amount of times the button was pressed.
The point is , this screen is inside of the Stateful Widget because we are updating view, we are changing UI.
If you are in doubt, then always remember this rule: If a widget changes (the user interacts with it, for example) it’s stateful. However, if a child is reacting to change, the containing parent can still be a Stateless widget if the parent doesn’t react to change.
Also, I created a card view example, you can see my code from GitHub.
My next post will be about Firebase & Flutter. Keep in touch!
Thanks for reading!
Leave a comment below or tweet me if with any questions/suggestions!
Also, I have GitHub repository for my Flutter series. I will share codes, links, and posts there.
