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

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

flutter

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.

flutter

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

Material

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.

flutter

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

material

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


Scaffold

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.

flutter-scaffold

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.

flutter-scaffold-floating-action-button

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.

Container

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.

flutter-container

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

flutter-container-padding-color

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.

flutter-width-height-alignment

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.

GestureDetector

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.

flutter-gesture-detector

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

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.

flutter-circular-progress-indicator

LinearProgressIndicator

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

flutter-linear-progress-indicator

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!

<< 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!

Leave a Reply

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

17 − 14 =