In this tutorial, we’ll learn how to create the mentioned WhatsApp chat screen UI in Flutter. We’ll see what Flutter widgets were used while created this UI. Also, the complete source code will be provided in the end.
Introduction: WhatsApp Chat Screen UI In Flutter
We’ve created this amazing chat screen UI in Flutter. Let’s see how we created this. See below:
- First, we’ve created a Flutter appbar widget to show the text ‘WhatsApp’ with two icons in the end.
- Then we’ve created tabs in that appbar.
- After that, we’ve used a Flutter list view builder to show a list of chats. We’ve created a list of maps in order to give each item a different value like image, name, text, message and date.
Flutter Widgets Used For Creating This UI
Let’s now see what Flutter widgets were used for creating this astounding WhatsApp chat screen UI in Flutter. See below:
- Flutter Appbar Widget
- Flutter Tab Bar Widget
- Flutter Icon Widget
- Flutter Icon Button Widget
- Flutter Text Widget
- Flutter SizedBox Widget
- Flutter Column Widget
- Flutter Row Widget
- Flutter Container Widget
- Flutter ClipRRect Widget
- Flutter Padding Widget
- Flutter Image Asset
- Flutter List View Builder
Other concepts are listed below:
Flutter List
Flutter map
Flutter list of maps
Click on them if you learn all these widgets in detail. Do share this post with your developer friends.
GitHub Link Of Flutter WhatsApp UI
Click here to get the GitHub code of WhatsApp UI in Flutter.
The complete source code of this beautiful WhatsApp Chat Screen UI is given in the below section.
WhatsApp Chat UI In Flutter Complete Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
List<dynamic> listOfDetails = [
{
'name': 'Zeeshan',
'imgPath': 'pic1.jpg',
'message': 'Hey, what\'s going on?',
'time': '10:50 am'
},
{
'name': 'Yasir',
'imgPath': 'pic2.jpg',
'message': 'Hey there.',
'time': '11:50 am'
},
{
'name': 'Awais',
'imgPath': 'pic3.jpg',
'message': 'Hey, what\'s going on?',
'time': '10:50 am'
},
{
'name': 'Usman',
'imgPath': 'pic4.jpg',
'message': 'Let\'s hang out',
'time': '10:50 am'
},
{
'name': 'Saqib',
'imgPath': 'pic5.jpeg',
'message': 'Call me when you are free',
'time': '07:50 am'
},
{
'name': 'Hasan',
'imgPath': 'pic6.jpeg',
'message': 'Been calling you',
'time': '04:50 am'
},
];
@override
Widget build(BuildContext context) {
var screenWidth = MediaQuery.of(context).size.width;
return SafeArea(
child: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff128c7e),
title: Text(
'Whatsapp',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 21),
),
actions: [
IconButton(
onPressed: () {},
constraints: BoxConstraints(maxWidth: 30),
icon: Icon(Icons.search)),
IconButton(
onPressed: () {},
constraints: BoxConstraints(maxWidth: 40),
icon: Icon(Icons.more_vert))
],
bottom:
TabBar(isScrollable: true, indicatorColor: Colors.white, tabs: [
SizedBox(
width: screenWidth * .02,
child: Tab(
child: Icon(
Icons.camera_alt,
size: 18,
)),
),
SizedBox(
width: screenWidth * .22,
child: Tab(
child: Text(
'CHATS',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 13),
),
),
),
SizedBox(
width: screenWidth * .22,
child: Tab(
child: Text(
'STATUS',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 13),
),
),
),
SizedBox(
width: screenWidth * .22,
child: Tab(
child: Text(
'CALLS',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 13),
),
),
),
]),
),
body: TabBarView(children: [
Container(),
chatsTab(),
Container(),
Container(),
]),
),
),
);
}
Widget chatsTab() {
return Container(
height: double.infinity,
width: double.infinity,
child: ListView.builder(
itemCount: listOfDetails.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
children: [
index != 0 //it will show the archived block with first item only
? SizedBox()
: Padding(
padding:
EdgeInsets.only(bottom: 10, top: 10, left: 10),
child: Row(
children: [
Icon(
Icons.archive_outlined,
size: 25,
color: Color(0xff128c7e),
),
SizedBox(
width: 15,
),
Text('Archived',
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 14.5,
fontWeight: FontWeight.w500)),
],
),
),
SizedBox(
height: 60,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.asset(
'assets/${listOfDetails[index]['imgPath']}',
height: 52,
width: 52,
fit: BoxFit.cover,
)),
SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(listOfDetails[index]['name'],
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 17,
fontWeight: FontWeight.w500)),
SizedBox(
height: 3,
),
Text(listOfDetails[index]['message'],
style: TextStyle(
color: Colors.grey.shade500,
fontSize: 12))
],
)
],
),
Text(listOfDetails[index]['time'],
style: TextStyle(
color: Colors.grey.shade500,
fontWeight: FontWeight.w500,
fontSize: 11))
],
),
),
],
),
);
}));
}
}Conclusion
To conclude this tutorial, hope you now have an in-depth understanding of how to create WhatsApp chat screen UI in Flutter. We’ll very glad to receive your informative feedback on this article.
Do visit our other articles on Flutter app development as well. Thank you for reading this article.
