I'm trying to create a clone project with this design: original design
But the result is not that good, IconButton is not at the right position, and a lot of animtation is not implemented yet:
- The search bar
- Icon Button Color changes
- Icon Button alignment my code
Here is my code:
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:momo/configs/themes/constants.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
snap: false,
floating: false,
expandedHeight: 145.0,
backgroundColor: Color(0xff008577),
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.search_rounded),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Badge(
padding: const EdgeInsets.all(3.5),
position: BadgePosition.topEnd(top: 5, end: 5),
animationType: BadgeAnimationType.scale,
animationDuration: Duration(milliseconds: 200),
badgeContent: Text(
'89',
style: TextStyle(
color: Colors.white,
fontSize: 7.0,
fontWeight: FontWeight.bold),
),
child: IconButton(
onPressed: () {},
splashRadius: 18.0,
icon: Icon(
Icons.notifications_none,
size: 26,
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
splashRadius: 18.0,
icon: CircleAvatar(
backgroundColor: Colors.white,
radius: 13,
child: CircleAvatar(
radius: 11.0,
backgroundImage:
AssetImage('assets/images/src_appscreens_appmain_contacts_img_ic_avatar_default.png'),
),
),
),
)
],
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
// expandedTitleScale: 3,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.ac_unit, color: Colors.white,)),
IconButton(onPressed: () {}, icon: Icon(Icons.access_alarm, color: Colors.white,)),
IconButton(onPressed: () {}, icon: Icon(Icons.accessibility_rounded, color: Colors.white,)),
IconButton(onPressed: () {}, icon: Icon(Icons.account_balance_wallet_outlined, color: Colors.white,)),
],
),
background: Image.asset(
'assets/images/src_appcore_utils_imageutil_img_im_background.jpg',
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
color: index.isOdd ? Colors.grey : Colors.white,
height: 100,
child: Center(
child: Text(
'$index',
textScaleFactor: 5,
),
),
);
},
childCount: 20,
),
)
],
),
);
}
}
Please help if you have any idea. Thanks alot!!!