Why Widgets in Flutter…?
Real world applications are endless as long as the humans having more creativity to do a job in much easier way to reach N number of users to all possible platforms. Now, the hot topic in the market was Flutter a new UI toolkit to build beautiful Native compiled applications for both Android & iOS platforms from a SingleCodebase
Transforming the imagination into real world digital applications just by applying some coding skills with the help of available tools to innovate more beautiful apps to do your work in a very simple way. Now, we can build the apps for story telling, Cab booking, E-Commerce, Social media, News apps etc.
To learn any tech stack or a programming language or to understand a framework on how it works? All we have to do is to understand the Real meaning behind the English words i.e: nothing but the terminology.
Now we are going to explore the Widgets in Flutter. So what is a Widget, a million dollar question for newbies?
A widget is small gadget or a mechanical device as per the google translate.
In software terms, A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms. A desk accessory or applet is an example of a simple, stand-alone user interface, in contrast with a more complex application such as a spreadsheet or word processor. — Wikipedia source
To start with Flutter, there are lots of widgets that we have to learn and start developing beautiful apps with less programming. I have bunch of important widgets to understand from it’s root level, it will help us to identify the purpose of it to be used in a certain scenario.
- Stateless Widget
- Stateful Widget
- Scaffold, Container, Row, Column, Stack, Center, Expanded etc.
In every stage of Learning, if we follow the famous rule of Divide & Conquer then it will be easy to grasp the knowledge in less time.
Divide the question or a word into bit’s and pieces, then read and understand the meaning and purpose of it. Gather more info as much as possible to utilise it properly and combine all together to make it useful.
Stateless Widget.
A widget that does not require mutable state.
A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete — Source flutter.dev
From the above image, those action figures cannot change it’s state, colour, or behaviour nor it won’t make any move for anything.
Stateful Widget
State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the Stateis promptly notified when such state changes, using State.setState.
In a simple terms, StatefulWidget is a class, it will help you to update the UI based on the user interaction with the app or the data from the API. But this class cannot do it alone, it will do such kind of operations with the help of State class, please refer to the below code snippet.
Finally this would be the outcome of having the StatefulWidget to make your UI elements more interactive.
ScaffoldWidget — Scaffolding, also called scaffold or staging, is a temporary structure used to support a work crew and materials to aid in the construction, maintenance and repair of buildings, bridges and all other man-made structures. — Wikipedia Source
So the scaffold can do several things in our real life to build or restore something good. In software terms ScaffoldWidget is a class that it can implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, bottom sheets, floatingActionButton, bottomNavigationBar etc.
Container — This widget can hold only direct child widget of any type, it consists of several features like padding, decorations, colour, alignment, transform etc. Container is just like an empty box which can contain unlimited amount of space in the whole screen and we can able to customise the size of the container and moreover, it can automatically resize its space based on its child widget.
Row and Column — We have two major widgets which play a major role in designing beautiful apps. To place your UI elements Vertically use Column widget and to place Horizontal set of widgets, then we have to use Row widget. These two widgets can hold N number of children widgets as a group. Please check the below code snippet
Expanded widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expandedwidget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
So, that’s it guy’s. I just shared my opinion all about the Widgets in flutter, and why they have been called as Widgets and moreover we just discussed few important widgets from the Flutter widgets library. There are several apps available like flutter gallery from Google team to know more about the widgets along with preview and the code snippet in a mobile application. So, it is available on play-store and we can use it as a reference to learn more about Flutter.
I’m going to share few more things on flutter like Animations, design pattern, tools, hidden options in Android Studio, Open source communities to get connected with more flutter developers, some Sample applications as well. This new year, wanted to be exiting with more fluttery things to make your hands more dirty with coding…..👨🏻💻. If you have any questions or doubts regarding flutter, don’t hesitate to reach out to me.
