Flutter UI Challenge-1

Hello Guys!. I would like to start a new UI challenge series for flutter. Also, I would like to share my development experience with these UIs.I am a huge fan of flutter. Ok, No more boring words. let’s start today’s UI challenge.

I found this from the internet and tried to implement it as follows.First, consider the first screen. After studying the UI I separated the screen into two parts
1)Top Area- Profile picture details, two buttons
2)Bottom Area- three small area that includes set of icons, Email verification, News, and updates
Let’s build each part correctly. However, for the above two parts, we need multi-child layout widgets in flutter(ex: Row, Column,etc..).

Home Top Part

As the first step to building this UI, I created a home screen using Scaffold Widget. In that widget body, I used Column to declare all widgets inside it. These are the main part of the home screen top.
1)profile image, profile name, subtext, Bell Icon- These all are horizontally Items. So we can use Row(Multi child layout) for these.

2)police number, number button, and right icon button- We can use the Row widget for this

3)horizontal dotted line-Can use Text for this

4)amount, value and date- Can use Row including with columns for vertical texts.

5)two horizontal buttons- Row with two containers

After adding above parts home top part look like this

Here I created separated widget for the Home Screen Top.It’s also stateless widget.There are no complex widgets here.Most used Container to add some decoration and used ClipRect to add some circular border to the image. Used a verticalDivider Widget to divide two buttons here.

Home Bottom Part

When first look at the home screen bottom you can see three areas.Those are divided by using two colours.I’ll explain my approach for this.First I created a parent Container inside the expanded widget.Why?. It’ll be expanded excluding home top part to the rest of the screen. So we can add the colour and put some some decoration into it like rounded corners at the top.

My approach is created three containers and put them inside one after the other container

Icon List Container(Parent Container)

• Bot Alert Container-(Includes email verification texts and see all text)

Inside the Bot Alert Container:

• News and Updates container

So here are the widgets that I have used.

1)Icon List Container(Parent Container)- Created Custom Container for Icon, Row-display icon horizontally.

2)Bot Alert Container- child Container of the Iconlist Container.Used two Row widgets for Bot Alert texts, Email verification button and texts.

3)News and Updates Container- This is the child of the Bot Alert Container. Also used two Row Widgets for the texts and images.

Note:

I created a separate custom container widget for the icon buttons.It’ll be included in my widgets folder.It’ll look as follows.

So main parts was completed.Using above IconWidget and other widgets bottom part was created as follows.

Note:

You will be confused about the decoration of the container above. We have to use Decoration continuously in flutter app.To reduce the readability and increase the Maintainability I have put them in a class like this.

Wrap Up All

Now all parts were completed and we have to created the full UI. So I put them inside the Scaffold and created the Home Screen as follows.

Conclusion

According to my approach for this UI may be different than yours.So put a comment below guys.You can get full source code here.

Hope you enjoy the article. Don’t t’t forgot to clap !!.Thanks.