WhatsApp UI | Part-1

 WhatsApp UI|Chat UI|PopUpMenu:

Video:

Code:

///main.dart

import 'package:flutter/material.dart';

 import 'package:youvid/camera.dart';
 import 'chat.dart';
 import 'status.dart';
 import 'calls.dart';

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

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Color(0xff075E54),
          indicatorColor: Colors.white),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  var width;
  TabController _tabController;

  @override  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text("WhatsApp"),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          PopupMenuButton(itemBuilder: (BuildContext context) {
            return [
              PopupMenuItem(child: Text("New group")),
              PopupMenuItem(child: Text("New broadcast")),
              PopupMenuItem(child: Text("WhatsApp Web")),
              PopupMenuItem(child: Text("Starred messages")),
              PopupMenuItem(child: Text("Settings")),
            ];
          }),
        ],
        bottom: PreferredSize(
          child: Container(
            child: TabBar(
              tabs: [
                Container(width: 30, child: Tab(icon: Icon(Icons.camera_alt))),
                Container(
                    width: width * 0.2,
                    child: Row(
                      children: <Widget>[
                        Tab(text: "CHATS"),
                        SizedBox(width: 5),
                        Tab(
                          icon: CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Text(
                              "5",
                              style: TextStyle(
                                  fontSize: 10.0,
                                  color: Theme.of(context).primaryColor),
                            ),
                            radius: 10,
                          ),
                        ),
                      ],
                    )),
                Container(
                    width: width * 0.2,
                    child: Row(
                      children: <Widget>[
                        Tab(text: "STATUS"),
                        SizedBox(width: 5),
                        Tab(
                          child: Icon(
                            Icons.brightness_1,
                            size: 9,
                          ),
                        ),
                      ],
                    )),
                Container(width: width * 0.2, child: Tab(text: "CALLS")),
              ],
              controller: _tabController,
              isScrollable: true,
            ),
          ),
          preferredSize: Size.fromHeight(60.0),
        ),
      ),
       body: TabBarView(children: [
         Camera(),
         Chat(),
         Status(),
         Calls(),
       ],
      controller: _tabController,),
    );
  }
}

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

class Camera extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(iconTheme: IconThemeData(color: Colors.white)),
      child: Stack(
        alignment: Alignment(0, 1),
        children: <Widget>[
          Container(color: Colors.blueGrey),
          Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Icon(Icons.keyboard_arrow_up),
                Container(
                  height: 100.0,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: List<Widget>.generate(
                        10,
                            (index) => Container(
                          color: Colors.redAccent,
                          width: 70.0,
                          margin: EdgeInsets.all(4.0),
                        ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 3.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.flash_off), onPressed: () {}),
                    Container(
                      width: 60.0,
                      height: 60.0,
                      decoration: ShapeDecoration(
                        shape: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(40.0),
                            borderSide:
                            BorderSide(color: Colors.white, width: 2.0)),
                      ),
                    ),
                    IconButton(icon: Icon(Icons.camera_alt), onPressed: () {}),
                  ],
                ),
                SizedBox(
                  height: 3.0,
                ),
                Container(
                  height: 30.0,
                  color: Colors.black,
                  child: Align(
                    child: Text("Hold for video, tap for photo",
                      style: TextStyle(color: Colors.white),),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

//////////chat:

import 'package:flutter/material.dart';

class Chat extends StatefulWidget {
  @override  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  @override  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) => _buildChatItem(),
        separatorBuilder: (context, index) => Divider(indent: 60.0,),
        itemCount: 12    );
  }

  _buildChatItem() {
    return Theme(
      data: ThemeData(),
      child: ListTile(
        leading: CircleAvatar(
          radius: 32.0,
          backgroundColor: Color(0xffdddddd),
          child: Icon(Icons.person, color: Colors.black, size: 38,),
        ),
        title: Text(
          "User 1",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        subtitle: Text("+91 1231231230: Thx"),
        trailing: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "3:30 pm",
                style: TextStyle(fontSize: 12.0),
              ),
              SizedBox(height: 3.0),
              CircleAvatar(
                child: Text(
                  "4",
                  style: TextStyle(
                      fontSize: 14.0,
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                ),
                radius: 11.0,
                backgroundColor: Colors.green,
              )
            ],
          ),
        ),
      ),
    );
  }
}