Tiny Flutter Apps Examples that you want to master

We’ve built a few Flutter apps already. Probably you have learned a few tips, and tricks out there. However, I’d like to introduce a new module where you will learn to build tiny Flutter apps. We’ll see the examples, test them in our own machines. 

And, in addition, we’ll apply the knowledge later to build a more robust, and dynamic Flutter app.

As the first module, we will learn two different types of tricks.

Firstly, the image property of the BoxDecoration widget expects another widget. And that is DecorationImage. 

Secondly, the DecorationImage has another property called image which expects an ImageProvider object.

We will try to learn each widget separately.

Why?

Because each widget needs our attention separately. 

For many reasons. One of them is, we want to decorate a box that contains images and text together.

Problem crops up if we want to show an image from the internet.

Usually, the image class has many constructors. But each has its own rules and regulations.

As a result, we cannot use any one of them to show image from internet.

In the first app in this series, we will learn to tackle this problem first.

As an outcome, we will be able to show an image in the background.

Flutter Apps Examples _ image before filtering
Flutter Apps Examples _ image before filtering

However, we want to give this photo a dim effect. For example, in many cases, we need to soften the background image.

Why?

The reason is simple. When the background image fades, the overlapping text becomes distinct.

Take a look at the next screenshot. 

As the background image fades, the text on the foreground looks distinct.

Flutter Apps Examples _ image after filtering
Flutter Apps Examples _ image after filtering

When you start to learn Flutter, or reach the intermediate stage, you will learn one key concept.

Flutter Apps examples need different widgets

Every widget has its own rules and regulations. Behind every property of each widget lies several hundred and thousands lines of codes. 

To give an image a fading effect, we need different types of widgets.

Finally, we want a BackDropFilter widget.

The filter property of the BackDropFilter widget again wants a ImageFilter constructor.

We must learn them separately to master the whole trick.

Tiny Flutter Examples will showcase these tricks and many more.

So stay tuned, and keep reading the new Flutter article everyday.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter

Comments

Leave a Reply