Beautiful WhatsApp Status Screen UI In Flutter [Free Source Code]

whatsapp status screen ui in flutter

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.

Introduction: WhatsApp Status Screen UI In Flutter

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.

GitHub Link To Flutter WhatsApp UI

Click here to get the GitHub code of WhatsApp UI in Flutter.

Flutter Widget Used To Create Status Screen

  1. Flutter Icon
  2. Flutter Icon Button
  3. Flutter Column
  4. Flutter Padding
  5. Flutter Row
  6. Flutter Container
  7. Flutter ClipRRect
  8. Flutter Text
  9. Flutter SizedBox
  10. Flutter Image Asset
  11. Flutter List View Builder

Other concepts are also listed below that were used to create a Flutter list of maps.

  1. Flutter List
  2. Flutter map
  3. Flutter list of maps

Below is the source code of this amazing WhatsApp status screen UI in Flutter.

Source Code of WhatsApp Status UI in Flutter

 

import 'package:flutter/material.dart';
class StatusTab extends StatelessWidget {
  List<dynamic> listOfStories = [
    {'name': 'Zeeshan Wazir', 'imgPath': 'pic4.jpg', 'time': 'Today, 12:50 am'},
    {
      'name': 'Yasir Nasir',
      'imgPath': 'pic5.jpeg',
      'time': 'Yesterday, 07:50 pm'
    },
    {'name': 'Awais Ali', 'imgPath': 'pic6.jpeg', 'time': '1 minute ago'},
    {'name': 'Usman Faroqi', 'imgPath': 'pic7.jpeg', 'time': '5 minutes agao'},
    {'name': 'Saqib Jadoon', 'imgPath': 'pic3.jpg', 'time': 'Today, 02:45'},
    {'name': 'Hasan Ali', 'imgPath': 'pic9.jpeg', 'time': 'Yesterday, 09:21'},
  ];
  @override
  Widget build(BuildContext context) {
   // this is the code of WhatsApp status screen UI in flutter 
    return SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: SizedBox(
                  height: 70,
                  width: double.infinity,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Container(
                            padding: EdgeInsets.all(2),
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Color(0xff128c7e)),
                            child: Container(
                              padding: EdgeInsets.all(2),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle, color: Colors.white),
                              child: ClipRRect(
                                  borderRadius: BorderRadius.circular(100),
                                  child: Image.asset(
                                    'assets/pic3.jpg',
                                    height: 52,
                                    width: 52,
                                    fit: BoxFit.cover,
                                  )),
                            ),
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('My Status',
                                  style: TextStyle(
                                      color: Colors.grey.shade800,
                                      fontSize: 17,
                                      fontWeight: FontWeight.w500)),
                              SizedBox(
                                height: 3,
                              ),
                              Text('Today, 11:31 pm',
                                  style: TextStyle(
                                      color: Colors.grey.shade500,
                                      fontSize: 12.5))
                            ],
                          )
                        ],
                      ),
                      Icon(Icons.more_horiz, color: Color(0xff128c7e), size: 24)
                    ],
                  ),
                ),
              ),
              statusListBlock('Recent Updates', 5),
              statusListBlock('Muted Updates', 5),
            ],
          ),
        ));
  }
  // astounding WhatsApp status screen UI in Flutter 
  Widget statusListBlock(title, number) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20).copyWith(top: 10),
          child: Text(title,
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 13.5,
                  fontWeight: FontWeight.w500)),
        ),
        ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: number,
            itemBuilder: (context, index) {
              return Padding(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: SizedBox(
                  height: 55,
                  width: double.infinity,
                  child: Row(
                    children: [
                      Container(
                        padding: EdgeInsets.all(2),
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Color(0xff128c7e)),
                        child: Container(
                          padding: EdgeInsets.all(2),
                          decoration: BoxDecoration(
                              shape: BoxShape.circle, color: Colors.white),
                          child: ClipRRect(
                              borderRadius: BorderRadius.circular(100),
                              child: Image.asset(
                                'assets/${listOfStories[index]['imgPath']}',
                                height: 48,
                                width: 48,
                                fit: BoxFit.cover,
                              )),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(listOfStories[index]['name'],
                              style: TextStyle(
                                  color: Colors.grey.shade800,
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500)),
                          SizedBox(
                            height: 3,
                          ),
                          Text(listOfStories[index]['time'],
                              style: TextStyle(
                                  color: Colors.grey.shade500, fontSize: 12))
                        ],
                      )
                    ],
                  ),
                ),
              );
            }),
      ],
    );
  }
}

Conclusion

To conclude this tutorial, hope you now have a practical knowledge of how to create WhatsApp status screen UI in Flutter. We’ll be looking forward to receive your feedback on this article.

We’d also love to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.

Leave a Comment

Your email address will not be published.