An Introduction to Basic Flutter Widgets

This tutorial describes what is widget and commonly used widgets in flutter applications. There are basic two types of flutter widgetsStateful Widgets and Stateless widgets.

Stateful widgets are mutable. Stateless widgets are immutable. Stateful widgets can change their state multiple times. Stateless widgets can not change their state during the runtime of the app. If you are looking for some flutter examples for how to use flutter widgets, you can find at HERE.


What is widget in flutter

Widget describes the UI of flutter application according to given values of properties in flutter widgets. When the state of widget is changed, Widget rebuilds its behavior in flutter framework. In short widget is used to build UI in flutter applications.


Commonly Used Flutter Widgets



The Container widget lets you create a rectangular visual element. A container can be decorated with BoxDecoration, such as a background, a border, or a shadow. A container may also have margins, padding, and constraints applied to its size. In addition, using a Container matrix can be transformed into three-dimensional space.



This widget allow you to create layout in vertical direction. This widget does not scroll and it is generally considered an error that more children in the column will fit the available room.



This widget allow you to create layout in horizontal direction. This widget does not scroll and it is generally considered an error that more children in the column will fit the available room.



Instead of being linearly oriented (either horizontal or vertical), the Stack widget lets you place widgets on top of each other in paint order. You can then position them using the Positioned widget on the Stack children, relative to the top, right, bottom, or left sides of the Stack. The stacks are based on the full position layout model of the web.



The Text widget lets you create a run of style text within your application.



This widget is used to display an image in the application. You can use different constructors to load images from multiple sources.

Image – Generic image loader using ImageProvider
Image.asset – Load image from flutter project’s assets
Image.file – Load image from system folder
Image.memory – Load image from memor
Image.Network – Load image from network



This widget drawn with a glyph from a font described in an IconData such as material’s predefined IconDatas in Icons. Icons are not interactive. For an interactive icon, use material’s IconButton. This widget assumes that the rendered icon is squared. Non-squared icons may render incorrectly.



A widget that displays a dart:ui.Image directly. The image is painted using paintImage, which describes the meanings of the various fields on this class in more detail. This widget is rarely used directly. Instead, use Image.



This widget is useful during development to indicate that the interface is not yet complete. By default, the placeholder is sized to fit its container. If the placeholder is in an unbounded space, it will size itself according to the given fallbackWidth and fallbackHeight.


Leave a Reply