AndroidFlutter

Basic widgets to start with for flutter developer beginner

Askfortricks.com Askfortricks.com

This post is for flutter developers who are new to the Flutter. Today we are covering the basic widgets which are heavily used in all kind of applications and also a baby step for new flutter developers.

In Flutter please go through the constructor of every widget to see any widgets argument and their attributes. This will help you to in developing good Flutter apps.

Widgets are as follows:

  • Text
  • Row and Column
  • Container
  • Stack
  • Expanded

1.Text

Similar to Android textview but it’s more powerful with loads of features to display the text on the screen.So what makes text more handsome is the style property. This attribute is optional but to apply the customisation we can use style and apply different attributes to make it look good on the screen.

2.Row and Column

Row widget display the children in horizontal direction.One important thing is to take care that we have limited space in case of row an column so we have to use Expanded widget.Expanded widget will tell that allow only the available space on the screen.

One very important attribute which applies both to Row and Column is the mainAxisAlignment and crossAxisAlignment.

Lets see how it behaves wrt Row and Column children widgets

For Row:

 

For Column:

Lets see an example of column widgets:

3.Container

Container as the name suggest is used mainly for adding padding, margin or applying the decoration to group of child widgets.

4.Stack

We have seen the direction of overlaying widgets in horizontal(Row) and vertical(Column) but to make beautiful UIs we have requirement to place one widget over the another so for that we use Stack widget.

5.Expanded

This widget simply expands the child of Row,Column or Flex to fill the available space vertically or horizontally depending upon the parent.
In below snippet we used Column so it will expand the second child vertically in yellow colour.

Credit: Code snippets taken from Flutter documentation
Please let us know what you think of Flutter for cross platform app development and about this post in comments.

How to solve release is not compliant with the Google Play 64-bit requirement in flutter

Feeling glad to receive your comment