An Introduction to Basic Flutter Widgets

There are basic two types of flutter widgets : Stateful 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.

Commonly Used Flutter Widgets

Container

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.

Column

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.

Row

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.

Stack

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.

Text

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

Image

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

Icon

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.

RawImage

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.

Placeholder

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