July 29, 2020

How to become pro in Flutter UI designing?

By Mohit Agrawal

Easy tips for the Flutter UI developers

Overview

Flutter is one of the fastest-growing platforms for mobile app development. Not because it is from Google but because of its simplicity. Just by using a few simple widgets, anyone can develop very complex UI in very little effort compared to native iOS and Android code.

Using flutter you can design iOS, Android, and now even web applications. Your single code base can generate applications for three different platforms. It sounds crazy 🙃.

Today I would like to share my Flutter UI experience with you guys. I have developed my own secret tips for flutter UI development which I want to share.

Introduction

Keeping in the mind that you are a very beginner in the Flutter UI, I will first start with how to get started with the flutter, what are the things you should do, and what you shouldn’t.

Then I will share my secret tips and tricks which I personally use for any. kind of Flutter UI design.

And some bonus points. Stay tuned !!!😎

Tips and tricks for Flutter UI development

How to get started with the Flutter?

Learn the basics first then you try to become expert.

What I have seen that most of the beginners try to learn the advanced concepts directly without knowing the basics first, which will never work out believe me 🥺.

I will tell you the learning path for the Flutter. Start with the basics widgets like Row, Column, Container, Stack, Text, Align, etc. Do you know that you can develop almost all types of UI just by using these simple widgets?

Check out these tutorials where I am just using few simple widgets to design complex UI designs.

Use Google to get UI design idea

Beginners always struggle to find a new UI design ideas or mock designs for practice. This is the problem I see with the beginners.

No need to worry because we have Google as the best friend. It always helps us to get things done. Just you have to search “mobile app UI designs”. You will get millions of idea, use anyone of them for practice.

Believe me it works!!!

Row columns approach – My secret

Its been around 2 years, I have been developing Flutter UI. In this small time duration, I have learned so many things that I never thought of.

One of them is Row & Column approach any UI design in the Flutter. Let’s talk about this in detail.

Whenever you get any UI to design then first spend at least 5 minutes to analyze it and try to break it in as much as Rows and Columns. Like I have done in the below image.

flutter_profile_ui_2
UI breakdown in Columns

You can see in the above images that How I am dividing the given UI into three different columns. Further, you can divide the first column into rows.

I have divided the whole profile detail UI design into three columns. Further, you can divide Column-1 into two rows, Column-3 into 5 columns ( 4 for text field and 1 for ‘save’ button’ ).

Bonus: Flutter UI challenge

Since you know the secret tips for UI design I assume that you will now able to design or at least start doing practice.

Here you go, I am giving you two UI challenges in the Flutter.

Alarm app UI in Flutter

You have design the the given alarm app UI in Flutter.

Dialer screen in Flutter

You have to design the Samsung dialer screen UI in Flutter.

Conclusion

Just practice, practice and more practice 🤪.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!