Flutter WhatsApp Status Screen UI

In this tutorial, we’ll learn how to create this amazing WhatsApp status screen UI in Flutter. We’ll also go through all the Flutter widgets that were used to create it. Also, source code for this screen will be provided in the end.

Outline

1. Introduction: WhatsApp Status Screen UI In Flutter
2. Steps To Create Status Screen UI
3. GitHub Link To Flutter WhatsApp UI
4. Flutter Widget Used To Create Status Screen
5. Source Code of WhatsApp Status UI in Flutter
6. Conclusion

Introduction: WhatsApp Status Screen UI In Flutter

In our previous article, we’ve created the chat screen UI. In this one, we’ll create UI of status screen. Let’s now understand how to create the mentioned UI.

Steps To Create Status Screen UI

• We’ve used the single child scroll view widget so the list will be scrollable.
• Then we’ve created the ‘My status block‘. For that, we’ve created a Flutter sizedbox widget to give it some height and width. Then we’ve passed image and text to it.
• We’ve used Flutter text widget to show text that will be used as titles.
• After that, we’ve used Flutter list view builder to show the list of status.

Source code for this screen is given in the end. If you want to see the source code of the whole WhatsApp UI created so far then click the below GitHub link. Continue reading…