More on Flutter Widgets

This is the fifth lesson of the Flutter series. Today we are going to learn on Flutter Widgets more.

Container widget

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

In main method as a home we pass home method. Still we didn’t create home widget and let’s create it in app_screens package. Inside this package let’s create home.dart file. In home.dart file we can create a class called “Home” that extends stateless widget class and we can return container widget there. Container widget is similar to web development using HTML. Here I made it center aligned and text widget. Then we should import Home class with in main.dart.

Your output will be as follows.

You can noticed that container widget is filling the entire screen. Here home widget is acting as a child of MaterialApp widget.

Now let us wrap Container widget by Center widget.

You will get the output as follows.

Let’s get an idea on margin and padding in Flutter.

Margin can be defined as the distance between two widgets. The distance of a widget from it’s outer boundary is padding.

Syntax of adding margin and padding as follows. “All (20.0)” means either margin or padding is for all directions (right, top, left, bottom) as value 20. If we want to add a margin or padding only for one direction we can use “only” keyword.

You will get the following output.

Text widget

We can simply style text widget as follows.

You will get the following output.

Rows and columns

Here we are going to discuss about how to place a widget in row widget and column widget, expanded widget.

In a row widget we can place widgets in horizontally. In a column widget we can place widgets in vertically.

Let us practice with row widget.

You will get the following weird looking output.

Here within the row we have two elements. The second element is not completely visible in the row. That doesn’t fit on the screen. As a solution we can use expanded widget that force the element to acquire the space. We wrap our text widget from an expanded widget now.

You will get the output as follows.

Let us use column widget.

Your output will be as follows now.

We are done. Hope you got some understanding on widgets in Flutter. Happy learning!!!

Hirudini Udugama

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store