WhatsApp Clone App UI Design using Flutter | Status Tab Page | PART 2

Hi Guys, Welcome to Proto Coders Point, This is PART 2 of WhatsApp Clone UI using Flutter, In this part we will continue with clone designing Status Tab Page.

If you have not gone through the first part of WhatsApp UI Clone using Flutter, Then make sure to go through it. Here

Build a WhatsApp Clone App UI Design using Flutter | Material Design

FINAL RESULT OF THIS PART

Fine Then Let’s continue.

In last section i have forgot to remove FloatingActionButton from Other Tabs, In Other words FloatingActionButton(New Chat Button) Should be Visible only in ChatScreen, So we need to Disable the button when user navigate/swipe towords other screen.

Then, To do so Follow this steps:

Step 1: Add a bool variable

Open main.dart file or whatever you have names your homepage

bool showFloatingB = true;

Step 2: Replace the initState() 

@override
 void initState() {
   // TODO: implement initState
   super.initState();
   // total tab we are creating is 4 so : length is 4 : initialIndex is set to position 1
   _tabController = new TabController(length: 4, vsync: this, initialIndex: 1);

   _tabController.addListener(() {
     if (_tabController.index == 1) {
       setState(() {
         showFloatingB = true;
       });
     } else {
       setState(() {
         showFloatingB = false;
       });
     }
   });
 }

In InitState method, we are checking _tabController index using _tabController.addListener.

If _tabController.index == 1  then it’s chatScreen visible so we set the showFloatingB to true else, We set showFloatingB to false.

Step 3 : Now Replace FloatingActionButton Widget

floatingActionButton: showFloatingB ? FloatingActionButton(
              onPressed: () {
                print("Floating Button Clicked");
              },
              backgroundColor: Theme.of(context).accentColor,
              child: Icon(
                Icons.message,
                color: Colors.white,
              ),
            )
          : null,

Here, we are setting the FloatingActionButton to be visible only if the showFloatingB is true else floatingActionButton is set to null, that means floatingActionButton is not visible.

WhatsApp Clone App UI Design using Flutter Status Tab Page | PART 2

Step 1: WhatsApp UI  StatusPage Using Flutter

Now,Open StatusPage.dart file  and copy paste the below lines of code in it.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:whatsappcloneflutter/StoryPage.dart';

class Statuspage extends StatefulWidget {
  @override
  _StatuspageState createState() => _StatuspageState();
}

class _StatuspageState extends State<Statuspage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[300],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Card(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: ListTile(
                leading: Stack(
                  children: <Widget>[
                    CircleAvatar(
                      radius: 30,
                      backgroundImage: NetworkImage(
                          "https://cdn2.vectorstock.com/i/1000x1000/23/81/default-avatar-profile-icon-vector-18942381.jpg"),
                    ),
                    Positioned(
                      bottom: 0.0,
                      right: 1.0,
                      child: Container(
                        height: 20,
                        width: 20,
                        child: Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 15,
                        ),
                        decoration: BoxDecoration(
                            color: Colors.green, shape: BoxShape.circle),
                      ),
                    ),
                  ],
                ),
                title: Text(
                  "My Status",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                subtitle: Text("Tap to add status update"),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Viewed updates",
              style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
              child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.white,
            child: ListView(
              children: <Widget>[
                ListTile(
                  leading: CircleAvatar(
                    radius: 30,
                    backgroundImage: NetworkImage(
                        "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
                  ),
                  title: Text(
                    "Rajat Palankar",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  subtitle: Text(
                    " 45 minutes ago",
                  ),
                  onTap: () => Navigator.push(context,
                      MaterialPageRoute(builder: (context) => StoryPage())),
                )
              ],
            ),
          )),
        ],
      ),
    );
  }
}

Step 2: Add Story View Flutter library

Then, Now Open pubspec.yaml file, and add flutter depencencies for the story_view flutter library package.

dependencies:
  story_view: ^0.10.0

Step 3: Create a new dart file StoryPage.dart

right click on lib > New > dart file  and name it as StoryPage.dart

Then, Copy Paste the below lines of dart code.

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

class StoryPage extends StatefulWidget {
  @override
  _StoryPageState createState() => _StoryPageState();
}

class _StoryPageState extends State<StoryPage> {
  final storycontroller = StoryController();   //a controller for your story

  final List<StoryItem> storyItems = [
    StoryItem.text("Hello Guys, Welcome to Proto Coders Point",Colors.blue[500]), // Story 1
    StoryItem.pageImage(NetworkImage("https://protocoderspoint.com/wpcontent/uploads/2019/10/protocoderspoint-rectangle-round-.png")), //Story 2
    
    // you can add as many as whatsapp story in this list 
  ];
  @override
  Widget build(BuildContext context) {
    return Material(
      child: StoryView(
        storyItems,
        controller: storycontroller,
        inline: false,
        repeat: false,
        onComplete: () => Navigator.pop(context), // when storys ends , the StoryPage wil be poped from the view
      ),
    );
  }
}

There you go Part 2 is Completed, your Flutter  whatsapp clone Ui Design is ready to show ChatScreen and StatusScreen with WhatsApp Story Clone page.