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
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
- Flutter Icon
- Flutter Icon Button
- Flutter Column
- Flutter Padding
- Flutter Row
- Flutter Container
- Flutter ClipRRect
- Flutter Text
- Flutter SizedBox
- Flutter Image Asset
- Flutter List View Builder
Other concepts are also listed below that were used to create a Flutter list of maps.
- Flutter List
- Flutter map
- 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.
