In the previous tutorial we explored the most basic Widget’s that you will need while developing your Flutter app. In this piece we are going to learn a few more widgets that will help you add some extra flare to your application.

Before we begin !

Breaking our widget into smaller widgets

We don’t want to keep adding all our widgets into a single class. It will become unmaintainable, unreadable, and in general is just a very bad practice. Luckily, creating your own widgets is very easy in Flutter. All you have to do is define a class, extend StatelessWidget or StatefulWidget and override the build method. It’s much easier to understand in code.

In the code below you can see we have everything into one single class called MyApp. Let’s break it into two widgets.

In the code above you can see we have everything into one single class called MyApp. Let’s break it into two widgets.

As you can see we create a new widget called Home, returned the Scaffold widget in the build method. You can place the Home widget into its own file, which you will eventually do with most of your widgets. So from now I will only be showing you code inside the Home widget and skip the MyApp widget.


Inkwell lets you add material ripple on tap of any widget. Just wrap on widget with Inkwell and tap it to see the effect!


Make sure you provide a callback (non-null) in the onTap property of Inkwell, else nothing will happen when you tap on the text.

Inkwell provides a lot of customisation options as well.


We have change the splash and highlight color to green and red respectively, and change add rounded borders of 4.0 pixels.


A lot of widgets in Flutter such as Scaffold, Card, etc use the Material widget under the hood. Material widget provides you with shadows, background color, borders and much more.

Below we have a simple Text inside a Container which is centred with the Center widget.


Now let’s wrap the Container with a Material widget and providing values to its various properties.


As you can see we have used the Material widget and various of its properties. While almost all of them are self-explanatory, let’s go through them and what they do.

  • elevation: Elevation gives a shadow to the child Widget.
  • shadowColor: The color that should be used as when elevation is provided.
  • color: Set the background color of the child Widget.
  • shape: The shape that Material properties should take. (Take note: It doesn’t change shape of the underlying widget.)

There are many more properties that Material widget provides, take a look at the Material documentation.

Never miss a post from TheTechnoCafe


You might have seen Scaffold being used in the previous examples and might be wondering what exactly does this widget does. Well, Scaffold has a lot to offer, and I mean a lot! Whenever you build a Flutter application, you are going to rely on Scaffold a lot.

For starters, whenever you create a new page, Scaffold provides you something to being with. It allows to add an AppBar, NavigationDrawer, Bottom Navigation Bar, Floating Action Button, Bottom Sheet to name a few with very few lines of code. I won’t be covering all the things that Scaffold is capable, that is complete another article in itself. Let’s check out the most common things that you will use Scaffold for, such as AppBar.


In the above code snippet you can see that we have added a basic Scaffold with AppBar. Also we have provided a title in the AppBar. Let’s add a FloatingActionButton.


Add a FloatingActionButton is just as simple as using the floatingActionButton provided by Scaffold and using the inbuilt FloatingActionButton widget. The child of FloatingActionButton is Icon. Flutter provides a lot of inbuilt icons, to use them you have to use Icon widget and pass in one of the icons provided in Icons.

Scaffold has a lot to offer, covering everything here is not the intent of this series. I recommend to give a glance on the Scaffold documentation. I will do a deep dive on Scaffold in one of my future posts so keep checking the website for new content.


In my opinion Container is one of the most used Widget, probably to the extent that sometimes I overuse it in my applications, but that is because it has so much to offer. From adding margins/padding to a Widget to defining your own shadows and gradients, Container can do a lot.

Below is a TextView surrounded by a basic Container with no parameter.


Now lets add padding of 16.0, and set the background color to red.


You can even set width and height (although it is not recommend all the time, as you layout should be flexible and hardcoding values all the time is a bad idea) and give an alignment to the child inside.


As you can see our Container is now 200.0 wide and 100.0 in height, and the content inside is aligned to the bottom right using the alignment property.

Container allows you to provide border, border-radius, shadow, gradient background to your child Widget. All of this will be covered in a separate article. Meanwhile do check out the documentation on Container widget.


Building a good looking UI is awesome, but a UI isn’t complete without interactivity. This is where GestureDetector comes in, as the name suggests, GestureDetector allows you to detect gestures of different kind. Let’s see an example.

You can see above we have a Text inside a Container with padding of 16.0, the Container is surrounded by a GestureDetector that has its onTap property set. Whenever you tap on the Text, ‘Tapped!’ will is printed in the console. Let’s add two more properties in GestureDetector.

We have provided callbacks for onDoubleTap and onLongPress, now if you tap, double tap and long press on the Text you will see the following output in console.


Progress Indicators

While you can create your own loading indicators in several different ways. Flutter provides some out of the box progress loading widgets.


CircularProgressIndicator is probably the simplest loading indicator you can use, as the name suggests its a progress indicator that is circular. It’s a very easy to use widget.



LinearProgressIndicator is the cousin of CircularProgressIndicator that is horizontal in shape.


You can give a value to the LinearProgressIndicator it will only fill the percentage of bar. You can fill 40% of the bar like this:

Tons and tons of Widgets!

Everything in Flutter is a Widget!

That statement is pretty true as you learn more and more about the framework. There are so many Widgets in Flutter that it isn’t possible to cover them all in a handful of articles, and you don’t need to learn all of them.

I have shown you the most common widgets that you will use, regardless the type of application you are building. I will try my best to cover as many widgets possible in future articles, but the best way to learn about widgets is to explore on your own!

Next Tutorial – Flutter Crash Course – 5 – Building Lists and Pages >>

<< Previous Tutorial – Flutter Crash Course – 3 – Dive into Flutter Widgets

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!

1 Comment

Flutter Crash Course - 5 - Building Lists and Pages - TheTechnoCafe · July 12, 2019 at 2:51 am

[…] << Previous Article – Flutter Crash Course – 4 – Dive into more Flutter Widg… […]

Leave a Reply

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

2 × 3 =