This content originally appeared on DEV Community and was authored by Anin Arafath
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
This content originally appeared on DEV Community and was authored by Anin Arafath
Anin Arafath | Sciencx (2022-02-05T06:59:41+00:00) Custom Silver App bar. Retrieved from https://www.scien.cx/2022/02/05/custom-silver-app-bar/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.