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 ?

Observation

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);

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

here we are using sliver appBar.

full code is available on gitHub

WhatsApp clone full video series YouTube

Comments

[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! 👍