In this tutorial, we’ll learn how to create WhatsApp calls UI in Flutter. The source code for that UI will be provided in the end. GitHub link of the WhatsApp UI developed in Flutter will also be provided.
So let’s get right into understanding how to develop the calls tab UI in Flutter.
Introduction: WhatsApp Calls UI In Flutter
In our previous Flutter posts, we’ve learnt how to create WhatsApp chats and status tab in Flutter. In this post, we’ll create the calls tab UI. We’ll see how the UI is created and what Flutter widgets were used for that.
Steps To Create Calls UI In Flutter
We’ve used the Flutter single child scroll view widget so we can make the column scrollable.
After that, we’ve created the first ‘create call link’ block using the row widget. As a first child, we’ve given it a container with a child icon. Then we’ve passed a column widget with two text widgets as a second child.
We’ve used the text widget to give title to the list of items.
In order to create a list of items, we’ve used Flutter list view builder. Then we’ve returned a sizedBox widget which contains row widget having two items. First items consists of image and text while the second one consists of call icon.
GitHub Link To WhatsApp UI In Flutter
Click here to get the GitHub code of WhatsApp screens UI in Flutter.
Flutter Widget Used To Create Calls Tab UI
- Flutter Icon
- Flutter Row
- Flutter Container
- Flutter ClipRRect
- Flutter SizedBox
- Flutter Image Asset
- Flutter List View Builder
- Flutter Icon Button
- Flutter Single Child Scroll View
- Flutter Column
- Flutter Padding
- Flutter Text
- Flutter Transform
Below are the concepts that were used to create a Flutter list of maps.
- Flutter List
- Flutter map
- Flutter list of maps
We also have used dart:math in this code so import it like this:
import 'dart:math' as math;
The complete source code of this WhatsApp calls UI in Flutter is given in the below section. Hope you’ll like it. Feel free to share it with your squad of Flutter developers.
Don’t hesitate to ask if you still have any questions related to the implementation of this calls tab UI. We’ll be more than happy to answer all your questions.
WhatsApp Calls UI In Flutter Complete Source Code
import 'package:flutter/material.dart';
import 'dart:math' as math;
class CallsTab extends StatelessWidget {
List<dynamic> listOfStories = [
{'name': 'Zeeshan Ali', 'imgPath': 'pic5.jpeg', 'time': 'Today, 11:52 am'},
{'name': 'Yameen', 'imgPath': 'pic3.jpg', 'time': '1 minute ago'},
{'name': 'Talha', 'imgPath': 'pic7.jpeg', 'time': '2 days ago'},
{'name': 'Yasir', 'imgPath': 'pic4.jpg', 'time': 'Today, 09:43 pm'},
{'name': 'Usman', 'imgPath': 'pic3.jpg', 'time': '20 minutes ago'},
];
@override
Widget build(BuildContext context) {
return SizedBox(
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 21, vertical: 11),
child: SizedBox(
height: 71,
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(10),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff128c7e)),
child: Transform.rotate(
angle: -51 * math.pi / 180,
child: Icon(Icons.link,
color: Colors.white, size: 24),
),
)),
SizedBox(
width: 11,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Create Call Link',
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 17,
fontWeight: FontWeight.w500)),
SizedBox(
height: 3,
),
Text('Share a link for your WhatsApp call',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 13))
],
)
],
),
],
),
),
),
callsListBlock('Recent', listOfStories.length)
],
),
));
}
Widget callsListBlock(title, number) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 21).copyWith(top: 11),
child: Text(title,
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 13.7,
fontWeight: FontWeight.w500)),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: number,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 21, vertical: 11),
child: SizedBox(
height: 56.1,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
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.5,
fontWeight: FontWeight.w500)),
SizedBox(
height: 4,
),
Row(
children: [
Transform.rotate(
angle: index.isEven
? -50 * math.pi / 180
: 140 * math.pi / 180,
child: Icon(
Icons.arrow_forward,
size: 15.1,
color: index.isEven
? Colors.green
: Colors.red.shade700,
),
),
SizedBox(
width: 4,
),
Text(listOfStories[index]['time'],
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 13.1)),
],
)
],
)
],
),
Icon(Icons.phone, size: 21, color: Color(0xff128c7e)),
],
),
),
);
}),
],
);
}
}Conclusion
To conclude this tutorial, hope you now have a proper practical knowledge of how to create WhatsApp calls UI in Flutter. We’ll be looking forward to receive your valuable feedback on this post.
We’d also love to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.
