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