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
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.