Introduction:
In this tutorial, we will explore how to build a WhatsApp UI Tutorial in Flutter. By the end of this tutorial, you’ll have a solid foundation for creating your own chat app. Let’s dive in!
Setting up the Main Application:
To get started, create a new Flutter project and open the main.dart file. This file serves as the entry point for our application. Inside the main function, we initialize the MyApp widget, which is responsible for configuring the overall application settings. The MyApp widget sets the app’s title, theme, and defines the HomePage as the initial screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Import necessary packages 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, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.teal, ), home: const HomePage(), ); } } |
Building the Home Screen:
The Home Screen is the main screen of our WhatsApp UI. It displays a tab bar at the top with four tabs: Camera, Chats, Status, and Calls. To implement this, we create the HomePage widget that extends StatefulWidget. Inside the build method, we use a DefaultTabController and a Scaffold to create the UI structure. The AppBar contains the app’s title and the TabBar widget, while the body displays the respective screens based on the selected tab.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
// Import necessary packages class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return DefaultTabController( length: 4, child: Scaffold( // App bar configuration appBar: AppBar( // App bar title title: const Text('WhatsApp'), // Tab bar configuration bottom: const TabBar( tabs: [ Tab( child: Icon( Icons.camera_alt, size: 18, ), ), Tab( child: Text('Chats'), ), Tab( child: Text('Status'), ), Tab( child: Text('Calls'), ), ], ), // Other app bar actions and icons actions: [ Icon(Icons.camera_alt_outlined), SizedBox(width: 20), Icon(Icons.search_rounded), PopupMenuButton( // Popup menu configuration itemBuilder: (context) => const [ PopupMenuItem( value: '1', child: Text('New group'), ), PopupMenuItem( value: '2', child: Text('New broadcast'), ), PopupMenuItem( value: '3', child: Text('Linked devices'), ), PopupMenuItem( value: '4', child: Text('Starred messages'), ), PopupMenuItem( value: '5', child: Text('Settings'), ), ], ), ], ), // Tab bar view configuration body: TabBarView( children: [ CameraScreen(), ChatScreen(), StatusScreen(), CallScreen(), ], ), ), ); } } |
Implementing the Chat Screen:
The Chat Screen displays a list of chat conversations. To create this screen, we define the ChatScreen widget, which extends StatefulWidget. In the build method, we use a ListView.builder to dynamically generate the chat items. Each chat item consists of a ListTile widget containing a profile picture, contact name, last message, and time. The ListView.builder ensures that the chat items are efficiently rendered based on the item count.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Import necessary packages class ChatScreen extends StatefulWidget { const ChatScreen({Key? key}) : super(key: key); @override State<ChatScreen> createState() => _ChatScreenState(); } class _ChatScreenState extends State<ChatScreen> { @override Widget build(BuildContext context) { return ListView.builder( itemCount: 50, itemBuilder: (context, index) { return const ListTile( leading: CircleAvatar( backgroundImage: NetworkImage( 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'), ), title: Text('John Khan'), subtitle: Text('Hi, How are you?'), trailing: Text('5:23 PM'), ); }, ); } } |
Adding the Status and Call Screens:
To complete our WhatsApp UI, we also need to implement the Status Screen and the Call Screen. The Status Screen displays a list of user statuses, while the Call Screen shows a list of recent calls. Both screens follow a similar pattern as the Chat Screen, using a ListView.builder to dynamically generate the respective items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// Import necessary packages class StatusScreen extends StatefulWidget { const StatusScreen({Key? key}) : super(key: key); @override State<StatusScreen> createState() => _StatusScreenState(); } class _StatusScreenState extends State<StatusScreen> { @override Widget build(BuildContext context) { return ListView.builder( itemCount: 10, itemBuilder: (context, index) { return ListTile( leading: Container( // Circle avatar decoration decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all(color: Colors.green, width: 3), ), child: const CircleAvatar( backgroundImage: NetworkImage( 'https://images.pexels.com/photos/712513/pexels-photo-712513.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'), ), ), title: const Text('Ema Gulalay'), subtitle: const Text('54 minutes ago'), ); }, ); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// Import necessary packages class CallScreen extends StatefulWidget { const CallScreen({Key? key}) : super(key: key); @override State<CallScreen> createState() => _CallScreenState(); } class _CallScreenState extends State<CallScreen> { @override Widget build(BuildContext context) { return ListView.builder( itemCount: 50, itemBuilder: (context, index) { return const ListTile( leading: CircleAvatar( backgroundImage: NetworkImage( 'https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'), ), title: Text('Amelia Khan'), subtitle: Text('Today, 5:23 PM'), trailing: Icon( Icons.phone_callback, color: Colors.green, ), ); }, ); } } |
Conclusion:
In this tutorial, we learned how to build a WhatsApp-like chat app UI using Flutter. We explored the implementation of the Home Screen, Chat Screen, Status Screen, and Call Screen. By combining these screens, you can create a fully functional chat app UI. Feel free to customize the UI further and add additional features to make it your own. Happy coding!
Remember to copy the respective code snippets for each screen into your Flutter project and connect them accordingly. Enjoy building your WhatsApp-inspired chat app UI with Flutter!
Please note that the article includes the code snippets with proper formatting. Ensure to copy the code accurately to your Flutter project.
