WhatsApp Clon in Flutter(Dart) using Rows & Column Widgets

- WhatsApp Clon App UI In Flutter -

1. WhatsApp UI With Output -

Shopping Card UI

      
      import 'package:flutter/material.dart';
// import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WhatsApp_C',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'WhatsApp'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  
  //Add name to display on our chat section
  
  var name = [
    'Vikki',
    'Mahesh',
    'Tejas',
    'Mukesh',
    'Rohit',
    'Sachin',
    'Vikki',
    'Mahesh',
    'Tejas',
    'Mukesh',
    'Rohit',
    'Sachin',
    'Vikki',
    'Mahesh',
    'Tejas',
    'Mukesh',
    'Rohit',
    'Sachin',
    'Vikki',
    'Mahesh',
    'Tejas',
    'Mukesh',
    'Rohit',
    'Sachin',
    'Vikki',
    'Mahesh',
    'Vikki',
    'Mahesh',
    'Tejas',
    'Mukesh',
    'Rohit',
    'Sachin',
    'Vikki',
    'Mahesh',
  ];
  
  //Add More image to fectch from Network
  
  var profile = [
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfXpi1Nrns6Lg_qmU2V4jJ4kexQbqsgKyCxg&usqp=CAU",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNDcky3ZF_NZZk3__VxrH-kC7ESKB6th_z8A&usqp=CAU",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfXpi1Nrns6Lg_qmU2V4jJ4kexQbqsgKyCxg&usqp=CAU",];
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        //   title: Text(widget.title),
        //   centerTitle: true,
        // ),
        
        
        body: Column(
      children: [
      
        //Top Icons and App name
      
      Container(
          color: Colors.green,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              //App Name & Icons
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "WhatsApp",
                      style: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.w700,
                          color: Colors.white),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Icon(Icons.camera_alt_outlined),
                        SizedBox(
                          width: 10,
                        ),
                        Icon(Icons.search),
                        SizedBox(
                          width: 10,
                        ),
                        Icon(Icons.menu),
                      ],
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        //Community tab
                        IconButton(
                          onPressed: () {},
                          icon: Icon(Icons.person, color: Colors.white),
                        ),
                        //Chat Button
                        Tab(
                          child:Text(
                            "Chats",
                            style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w500,
                                color: Colors.white),
                          ),
                        ),
                      ],
                    ),
                    //Status Button
                    Tab(
                      child: Text(
                        "Status",
                        style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.w500,
                            color: Colors.white),
                      ),
                    ),
                    //Call Button
                    TextButton(
                      onPressed: () {},
                      child: const Text(
                        "Calls",
                        style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.w500,
                            color: Colors.white),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

        // space between chat and messages
        SizedBox(
          height: 10,
        ),

        //List
        Expanded(
          child: ListView.builder(
              itemCount: 15,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              CircleAvatar(
                                  backgroundImage:
                                      NetworkImage(profile[index], scale: 300)),
                              // ClipOval(
                              //     child: Image.network(
                              //   profile[index],
                              //   scale: 30,
                              //   width: 50,
                              //   height: 50,
                              //   fit: BoxFit.cover,
                              // )),
                              const SizedBox(
                                width: 10,
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    name[index],
                                    style: TextStyle(
                                        fontSize: 20, fontWeight: FontWeight.w600),
                                  ),
                                  Row(
                                    children: [
                                      Icon(Icons.check, size: 15),
                                      SizedBox(
                                        width: 2,
                                      ),
                                      Text("Hello"),
                                    ],
                                  ),
                                ],
                              ),
                            ],
                          ),
                          Text(
                            "Yesterday",
                            style: TextStyle(
                                fontWeight: FontWeight.w600, fontSize: 10),
                          ),

                        ],
                      ),
                      Divider()
                    ],
                  ),
                );
              }),
        ),
      ],
    ));
  }
}
      
      

Output - 

Here Our GitHub Link - coming soon.......

Follow Our YouTube Channel - http://www.youtube.com/@technicalcoolguys409