Basic Widgets in Flutter for Beginner's

As we know everything in flutter consists of widgets.let us learn about some basic widgets in flutter which helps to build a interactive responsive application.

Scaffold:-

Scaffold widget allows us to implement a basic layout for our app. This class provides APIs for showing drawers,snack bars and bottom sheets. The scaffold is good enough to create general purpose mobile application and contains almost everything what we need to create a functional and responsive app.

Few important properties of scaffold widgets are:-

• appBar
• body
• floatingActionButton
• BottomnavigationBar
• bottomsheets
• drawer
• backgroundColor etc …

AppBar:-

A material design AppBar to display at the top of the scaffold. It consists of toolbar and other widgets such as TabBar and FlexibleSpaceBar. AppBar is very important part of our application It can hold tittle, icons, menu, drawer on it.

Some important properties of AppBar:-

• title
• actions
• background
• elevation
• leading
• bottom
• brightness etc…

Text:-

This widget is very very important. This widget displays a string of text with single style. Depending on the layout constraints we can break the string across multiple lines. We can style the text like changing the fontStyle , fontSize, color, textAlign, textDirection etc…

Properties of Text widgets:-

• data
• style
• textAlign
• textDirection
• semanticsLabel etc…

Rows and Columns:-

These widgets shows their children in horizontal and vertical array respectively. We can align children as per our requirement in horizontal or vertical way. These two widgets are very much useful in designing UI.

Properties of Rows and Column:-

• children
• mainAxisAlignment
• crossAxisAlignment
• textDirection
• textdBaseline
• mainAxisSize
• clipBehaviour
• direction etc..

Here we can align content in rows and columns as per our choice by using mainAxisAlignment and crossAxisAlignment.

Container:-

A convenience widget that combines common painting and positioning and sizing widgets. A container class can be used to store one or more widgets . Container is like box in which contents can be stored according to our convience. Basically container has margin which separates container from other widgets, container surrounds it’s child with padding. The container can be changed to different sizes using border and containers can be decorated to different colors,shapes etc using decoration.

Some properties of Container are:-

• color
• height and width
• margin
• padding
• alignment
• decoration
• transform
• constraints etc…

Image and Assets:-

There are couple of different ways we can use image in our flutter app. Either we can use NetworkImage that mean we can grab an image from web which is already hosted somewhere or we can use AssetImage that mean from the source file from our flutter project.

To use AssetImage we need to save images in our project and use those images as Assets.

Properties of Image.asset:-

• color
• alignment
• centerSlice
• fit
• frameBuilder
• height
• image
• width etc..

Icons:-

Icon class in flutter is use to show specific icons in our app. Flutter uses material design icons that are symbols for common actions and items.

Icons are not interactive. For interactive icon consider material’s IconButtons.

Some properties of Icon:-

• color
• icon
• size
• textDirection
• semanticLabel

Their are so many widgets other than these but these widgets are very important to get started with anything. I suggest you to go through flutter official documentation for learning flutter.

Thanks for reading ! Keep learning,keep coding.

If you like this article then click Like button and share to help others.

Thank you...