WhatsApp UI | Part-2

WhatsApp UI|Status UI|Call UI: 

Video:

Code:

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

class Status extends StatefulWidget {
  @override  _StatusState createState() => _StatusState();
}

class _StatusState extends State<Status> {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          _buildMyStatus("My Status", "Today, 8:30 am"),
          _buildText("Recent updates"),
          _buildMyStatus("User 3", "3.30 minutes ago"),
          _buildMyStatus("User 5", "5 minutes ago"),
          _buildText("Viewed updates"),
          _buildMyStatus("User 7", "Yesterday 10:20 pm"),
        ],
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.edit, color: Colors.blueGrey, size: 30),
            mini: true,
            backgroundColor: Color(0xffdddddd),
          ),
          SizedBox(
            height: 15.0,
          ),
          FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.camera_enhance),
            backgroundColor: Colors.green,
          ),
        ],
      ),
    );
  }

  _buildText(text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.grey,
        ),
      ),
    );
  }

  _buildMyStatus(title, time) {
    return Padding(
      padding: const EdgeInsets.all(3.0),
      child: Card(
        elevation: 0.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.green, width: 2.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: CircleAvatar(
                      radius: 26.0,
                      backgroundColor: Color(0xffdddddd),
                      child: Icon(Icons.person, color: Colors.black, size: 38),
                    ),
                  ),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 16.0,
                      ),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      time,
                      style: TextStyle(
                        fontSize: 12.0,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

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

class Calls extends StatefulWidget {
  @override  _CallsState createState() => _CallsState();
}

class _CallsState extends State<Calls> {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          _buildCallsItem(true),
          _buildCallsItem(true),
          _buildCallsItem(false),
          _buildCallsItem(true),
          _buildCallsItem(false),
          _buildCallsItem(true),
          _buildCallsItem(false),
          _buildCallsItem(true),
          _buildCallsItem(false),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add_call),
        backgroundColor: Colors.green,
      ),
    );
  }

  _buildCallsItem(isCall) {
    return ListTile(
      leading: CircleAvatar(
        radius: 25,
        backgroundColor: Color(0xffdddddd),
        child: Icon(Icons.person, color: Colors.black, size: 38),
      ),
      title: Text("User 1"),
      subtitle: Row(
        children: <Widget>[
          Icon(
            Icons.transit_enterexit,
            size: 23.0,
            color: Colors.red,
          ),
          SizedBox(
            width: 3.0,
          ),
          Text(
            "7 July, 7:35 am",
            style: TextStyle(
              color: Colors.grey,
            ),
          )
        ],
      ),
      trailing: IconButton(
          icon: Icon(
            isCall ? Icons.call : Icons.videocam,
            color: Colors.green,
            size: 28,
          ),
          onPressed: () {}),
    );
  }
}