DEV Community

Cover image for Custom Silver App bar
Anin Arafath
Anin Arafath

Posted on

Custom Silver App bar

In normal case we use AppBar widget to create tool bar, and when we need a special type of app-bar like WhatsApp app-bar then we need an another widget called SliverAppBar.

These is simple to understand but it's not very simple, if we practice and explore more more parameters then will be simple.

I have seen many questions in stackOverflow and gitHub-repos how we can build WhatsApp like app-bar ?


Image description

First we need understand about differentiation of WhatsApp appBar and normal appBar

  • We can observe from WhatsApp there we can see a sliding behaviour on appBar.

  • That sliding behaviour we can't build using normal AppBar widget .

  • Wee need help of another widget to achieve that kind of design.

Let's build.

import 'package:flutter/material.dart';
import 'package:whatsapp/constants/app_colors.dart';
import 'package:whatsapp/views/screens/home_screen/widgets/custom_tab.dart';

class CustomAppBar extends StatelessWidget {
  const CustomAppBar({
    Key? key,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return SliverAppBar(
      toolbarHeight: 49,
      pinned: true,
      expandedHeight: 110,
      backgroundColor: AppColors.primarySwatch,
      title: const Text(
        style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 23,
      centerTitle: false,
      actions: [
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(,
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(Icons.more_vert),
      bottom: const PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: TabBar(
          indicatorWeight: 3,
          indicatorColor: Colors.white,
          tabs: [
              icon: Icon(Icons.photo_camera),
            CustomTab(name: 'chats'),
            CustomTab(name: 'status'),
            CustomTab(name: 'calls'),

Enter fullscreen mode Exit fullscreen mode

here we are using sliver appBar.

full code is available on gitHub

WhatsApp clone full video series YouTube

Top comments (1)

victoria_mostova profile image
Victoria Mostova

Great job on customizing the Silver App Bar! Your step-by-step guide is clear and helpful for developers looking to add a personalized touch to their apps. If you're considering broader app development, exploring how to create an app like WhatsApp could be an exciting next step. Keep up the good work! 👍