Flutter Tutorial: Designing a Stunning Dashboard and Navigation Bar for Bisky Chat App

In this highly anticipated blog, we'll be diving into the world of Flutter design, focusing on creating an intuitive dashboard and navigation bar for your Bisky Chat app. Join us as we explore the latest techniques and best practices to deliver an exceptional user experience.

Key Topics covered:

• Create Dashboard page
• Add Dashboard Bottom Navigation Bar
• Save navigation stage

Description:

The tutorial will walk you through the process of creating Dashboard Page and Bottom Navigation bar. We will implement routing stages to avoid a user to login each time he/she opens the application

Code Snippet(DashboardPage.dart):

• lib/pages/dashboard/DashboardPage.dart

import 'package:auto_route/annotations.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

@RoutePage()
class DashboardPage extends StatefulWidget{
  @override
  State<DashboardPage> createState() {
    return _DashboardPageState();
  }
}

class _DashboardPageState extends State<DashboardPage>{

  int selectedIndex = 0;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Stack(
        children: [

        ],
      ),
      bottomNavigationBar:  bottomNavigationBar(),
    );
  }

 Widget bottomNavigationBar() {

    return Card(
      child: BottomNavigationBar(
        currentIndex: selectedIndex,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.black,
        showSelectedLabels: true,
        items: [

          BottomNavigationBarItem(
              icon: Image.asset("assets/images/chat.png",width: 20,height: 20,),
            label: "Chat",
            activeIcon:
            Image.asset("assets/images/chat.png",width: 20,height: 20,color: Colors.green,)
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/friends.png",width: 20,height: 20,),
              label: "Friends",
              activeIcon:
              Image.asset("assets/images/friends.png",width: 20,height: 20,color: Colors.green,)
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/settings.png",width: 20,height: 20,),
              label: "Settings",
              activeIcon:
              Image.asset("assets/images/settings.png",width: 20,height: 20,color: Colors.green,)
          )
        ],
      ),
    );
 }
}

    

Don't forget to run the following command in your terminal to generate DashboardPage.g.dart route flutter packages pub run build_runner build

Code Snippet(LocalStorageService.dart):

Create LocalStorageService.dart class

• lib/service/LocalStorageService.dart

import 'package:shared_preferences/shared_preferences.dart';
class LocalStorageService{
  static String stage = "STAGE";
  static String userId = "USER_ID";
  static String dashboardPage = "DASHBOARD_PAGE";
  static String updateNamePage = "UPDATE_NAME_PAGE";

  static Future<void> putString(String key,String value) async{

    SharedPreferences preferences= await SharedPreferences.getInstance();
    preferences.setString(key, value);
  }

  static Future<String?> getString(String key) async{

    SharedPreferences preferences= await SharedPreferences.getInstance();
    return  preferences.getString(key);
  }
  static Future<bool> deleteKey(String key) async{

    SharedPreferences preferences= await SharedPreferences.getInstance();
    return  preferences.remove(key);
  }
}
        
        

Code Snippet(OtpPage.dart) modification:

Add below code before AutoRouter.of(context).push(UpdateNamePage(userId: widget.userId));

• lib/pages/otp.OtpPage.dart

LocalStorageService.putString(LocalStorageService.userId,widget.userId);
LocalStorageService.putString(LocalStorageService.stage,LocalStorageService.updateNamePage);
        
        

Let's add the route in lib/route/app_route/AppRouter.dart

AutoRoute(page: DashboardPage.page),
        
        

Code Snippet(UpdateNamePage.dart) modification:

Add below code in SuccessUpdateUserAuthState block

• lib/pages/update_name/UpdateNamePage.dart

// navigate to dashboard
LocalStorageService.putString(LocalStorageService.stage,LocalStorageService.dashboardPage);
AutoRouter.of(context).push(const DashboardPage());

        
        

Let's add the route in lib/route/app_route/AppRouter.dart

AutoRoute(page: DashboardPage.page),
        
        

Code Snippet(injection.dart) modification:

Add below code in injection.dart

• lib/dependency-injection/injection.dart

 ..registerFactory((container) => LocalStorageService())

        
        

Code Snippet(main.dart) modification:

Add routing stage logic. Create initialization method and replace AutoRouter.of(context).push(const IntroPage()); with initialization();

• lib/main.dart

            

initialization() async {

    String? stage = await LocalStorageService.getString(LocalStorageService.stage);

    if(stage != null){


      if(stage  == LocalStorageService.dashboardPage){

        AutoRouter.of(context).push(const DashboardPage());
      }else if(stage  == LocalStorageService.updateNamePage){

        String? userId = await LocalStorageService.getString(LocalStorageService.userId);
        AutoRouter.of(context).push( UpdateNamePage(userId: userId ?? ""));
      }else{
        AutoRouter.of(context).push(const IntroPage());
      }


    }else{
      // navigate to intro screen
      AutoRouter.of(context).push(const IntroPage());
    }
  }


        
        

Conclusion:

We managed to create Dashboard Page, Bottom Nav Bar and routing stages. In the next Tutorial we will look up on friends who are using the chat applications so that we can start conversation. Don't forget to share and join our Discord Channel, May you please subscribe to our YouTube Channel