In this piece we are going to explore most common Widget’s in Flutter and mobile development in general. You will be covering a very small subset of Widget’s from the Flutter framework. Flutter has plethora of Widget’s and it is not practical to cover them all. Visit the official Flutter website to know more.

Text

Text is probably the most used element in any kind of UI development. Flutter provides a widget name Text.

As you can see all you have to do is provide a String in the Text widget.

flutter text

To centre the widget just wrap it with Center Widget.

flutter text center

You can customise the Text using TextStyle widget. You can pass a TextStyle widget to Text in its style property. 

As you can see we only used three properties here in TextStyle, fontSize, color and fontWeight. TextStyle has many more properties that you can use to customise text.

flutter text style

RaisedButton

There are a couple of Widgets available in Flutter to create buttons. We are going to look at one of them called RaisedButton. As the name suggests, it is a button that is raised.

flutter raised button

RaisedButton widget takes a callback function in its onPressed property. This callback is fired when whenever you press the button. It also takes a property named child, this is whatever you want to be inside the button. Here we have just added a simple text, but you could put anything that is a Widget inside the child property….literally anything!

There are a lot of properties that you can set to customise the button. Below you can see I have increased the elevation of button to 6.0, made it circular. added 32.0 padding, and changed its colour to blue.

flutter raised button custom

Here is a link to very nice and short medium article that explains all the properties of RaisedButton: Widgets: Raised Button – FlutterDoc.

Columns

Columns and Rows (in next section) are some of the primary Widgets that you will often use when building simple as well as complex layouts in Flutter.

Suppose you want to put a couple of Widgets one below the other vertically. In this case you will use a Column. Let’s see an example where we put three Text widgets inside a column.

flutter column

Column takes a list of widgets in its children property and aligns then vertically one after the other. There are other properties in Column which you can use to align the children. With Column and Row there is this concept of Main Axis and Cross Axis. 

Column aligns its child widgets vertically so its Main Axis is vertical. Cross Axis is the opposite of Main Axis, so it’s the horizontal axis on case of Column.

flutter column axis

Column’s Main and Cross axis.

You can move content across Main Axis and Cross Axis. Lets move content to centre across Main Axis.

flutter column main axis center

Similarly you can also bring the content to centre across Cross Axis.

flutter column cross main axis

There are various options to align content across main and cross axis:

Main Axis:

  • MainAxisAlignment.center
  • MainAxisAlignment.start
  • MainAxisAlignment.end
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceEvenly

Cross Axis:

  • CrossAxisAlignment.center
  • CrossAxisAlignment.start
  • CrossAxisAlignment.end
  • CrossAxisAlignment.baseline
  • CrossAxisAlignment.stretch

Never miss a post from TheTechnoCafe

Rows

Rows are similar to Columns, except that content is aligned horizontally in Rows. So if we want our Text’s to be side by side then we will put them inside a Row.

flutter row

When it comes to Row the Main Axis runs horizontally and the Cross Axis runs vertically.

flutter row axis

So if you want to bring all the text views in the centre horizontally just set the mainAxisAlignment to centre.

Column and Row are widgets that you are going to use a lot for building layouts in Flutter, so it’s better to get a grasp on them early on. Go ahead and experiment with Column and Row in a sample app.

Card

Creating a card is straight forward in Flutter, just wrap you content inside a Card widget.

Below is an example where a Text is wrapped in a Card.

flutter card

Note (Padding Widget): Padding widget is used when you want to add padding around a widget. It takes an instance of EdgeInsets in the padding parameter. EdgeInsets are explained in next part of this series. It’s noting but a fancy term of providing padding and margins. I have no idea why sometimes framework developers come up with complicated names unnecessarily.

You can customise Card widget with its various properties. We have changed the color of card to green and increased the elevation to 6.0. 

flutter card custom

I don’t want to make this tutorial too long, so I have broken it into two parts. In next tutorial you will explore even more Flutter Widgets.

<< Previous Tutorial – Flutter Crash Course – 2 – Application and UI Basics


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

2 Comments

ninja · March 27, 2019 at 7:33 am

thanks for the detail about the flutter but also check out my post How to use flutter software for a beginner and review

Flutter Crash Course - 2 - Application and UI Basics - TheTechnoCafe · February 2, 2019 at 11:51 pm

[…] Flutter Crash Course – 3 – Dive into Flutter Widget – Next Tutorial >> […]

Leave a Reply

Your email address will not be published. Required fields are marked *

17 − five =