Display Widget based on Current State in Flutter

messages-screen.dart

import 'package:flutter/material.dart';
import 'chat-screen.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'package:cuberto_bottom_bar/cuberto_bottom_bar.dart';

class MessagesScreen extends StatefulWidget {
  @override
  MessagesScreenState createState() {
    return new MessagesScreenState();
  }
}

class MessagesScreenState extends State<MessagesScreen> {
  int currentPage = 0;
  String currentTitle = "Exams";
  Color currentColor = Colors.lightGreenAccent;
  Color inactiveColor = Colors.white;
  Color barBackgroundColor = Color(0xFF1d1d25);


  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      bottomNavigationBar: _buildBottomBar(),
      appBar: AppBar(
        backgroundColor: Theme.of(context).backgroundColor,
        elevation: 0,
        title: Text(currentTitle, style: new TextStyle(color: currentColor),),
        centerTitle: true,
      ),
      body: ListView(
        physics: BouncingScrollPhysics(),
        children: <Widget>[
          _buildTile(
            title: "BCS 41st",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "BCS40th",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "Dhaka University KA Unit",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "Chittagong University KHA Unit",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "BUET CSE",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "All Job Exam",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "Bank Job Exam",
            subtitle: "Last message show",
            time: "10:55",
          ),
          _buildTile(
            title: "Pop Quiz",
            subtitle: "Last message show",
            time: "10:55",
          ),
        ],
      ),
    );
  }

  Widget _buildTile({
    String title,
    String subtitle,
    String time,

  }) {
    return Theme(
      data: ThemeData(
        textTheme: TextTheme(
          subhead: TextStyle(color: Colors.white),
          caption: TextStyle(color: Colors.grey),
        ),
      ),
      child: ListTile(
        contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),

// There was a circular avatar here. But it makes no sense right now to keep circular avatar within the UI. So commenting it out for later on when we have actual avatars.

//        leading: ClipRRect(
//          borderRadius: BorderRadius.circular(70),
////          child: CircleAvatar(
////            radius: 30,
//////            backgroundImage: NetworkImage(
//////              "https://vilamulher.com.br/imagens/thumbs/2014/11/10/4-razoes-para-ser-uma-pessoa-mais-curiosa-thumb-570.jpg",
//////            ),
////          ),
//        ),

        title: Text(title),
        subtitle: Text(subtitle),
        trailing: Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 5),
          child: Text(
            "657 active",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 12, fontFamily: 'GoogleMedium', color: Colors.white),
          ),
          decoration: BoxDecoration(
              color: Colors.black45,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(20)
          ),
        ),
        onTap: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) => ChatScreen(title: title)),
          );
        },
      ),
    );
  }

  Widget _buildBottomBar() {
   return CubertoBottomBar(
     barBackgroundColor: barBackgroundColor,
     inactiveIconColor: inactiveColor,
     tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND, // By default its CubertoTabStyle.STYLE_NORMAL
     initialSelection: 0, // By default its 0
     drawer: CubertoDrawer.NO_DRAWER, // By default its NO_DRAWER (Available START_DRAWER and END_DRAWER as per where you want to how the drawer icon in Cuberto Bottom bar)
     tabs: [
       TabData(
           iconData: Icons.home,
           title: "Exams",
           tabColor: Colors.lightGreenAccent),
       TabData(
           iconData: Icons.favorite_border,
           title: "Favourites",
           tabColor: Colors.pink),
       TabData(
           iconData: Icons.access_alarm,
           title: "Reminders",
           tabColor: Colors.blue),
     ],
     onTabChangedListener: (position, title, color) {
       setState(() {
         currentPage = position;
         currentTitle = title;
         currentColor = color;
       });

     },
   );
  }




}