I want to Hide some widgets from SliverAppbar On Scroll Flutter - flutter

Question

enter image description here
Hello, I want to keep and hide few things on scroll from SliverAppBar bottom section. For example, when I scroll the list from top to bottom, the logo , branch, distance, etc should hide. The leading, title, actions, and restaurant title will be shown. Below is my code, Can anyone please help?
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:urmenuz/constants/styles.dart';
import 'package:urmenuz/widgets/hidable/hidable.dart';
import '../../constants/colors.dart';
import '../../constants/configs.dart';
import '../../utils/rating_bar.dart';
import 'package:flutter/rendering.dart';
class MenuHeader extends SliverAppBar {
final expandedHeight;
final collapsedHeight;
final bool dineIn;
final Function backFunction;
final Function menuFunction;
final Function infoFunction;
final Function serviceIconFunction;
final Widget tblTextField;
final ScrollController scrollController;
MenuHeader({
this.expandedHeight = 350,
this.collapsedHeight = 160,
this.dineIn = true,
required this.backFunction,
required this.menuFunction,
required this.infoFunction,
required this.serviceIconFunction,
required this.scrollController,
required this.tblTextField,
}) : super(
elevation: 0.0,
pinned: true,
floating: false,
snap: false,
forceElevated: true);
Color? get backgroundColor => AppColors.lightGrey;
// #override
// Widget? get background => Image.asset(IMAGE_ASSET_DIR + 'background2.png',
// fit: BoxFit.cover,
// );
#override
Widget? get leading {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: GestureDetector(
onTap: () => backFunction(),
child: Container(
height: 36,
width: 36,
decoration: BoxDecoration(
color: AppColors.lightRed,
borderRadius: BorderRadius.circular(10)),
child: Center(
child: Icon(
Icons.arrow_back_ios_new,
color: Colors.black,
)),
),
),
);
}
#override
Widget? get title {
return Text(
'urMenu',
style: TextStyle(
color: AppColors.lightGrey,
fontWeight: FontWeight.w600,
fontSize: 20),
);
}
#override
List<Widget>? get actions {
return [
Row(
children: [
GestureDetector(
onTap: () => serviceIconFunction(),
child: Image.asset(
IMAGE_ASSET_DIR + "${dineIn ? "dine_in" : "pick_up"}.png",
height: 40,
width: 40,
),
),
SizedBox(
width: 20,
),
Container(
height: 36,
width: 36,
margin: EdgeInsets.only(right: 20),
decoration: BoxDecoration(
color: AppColors.lightRed,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: AppColors.grey.withOpacity(0.1),
offset: Offset(0.0, 0.0), //(x,y)
blurRadius: 4.0,
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () => menuFunction(),
child: Image.asset(
IMAGE_ASSET_DIR + 'menu.png',
color: Colors.black,
)),
)),
],
),
];
}
#override
PreferredSizeWidget? get bottom {
return PreferredSize(
preferredSize: const Size.fromHeight(70),
child: Container(
color: Colors.transparent,
height: 160,
child: Padding(
padding: const EdgeInsets.only(bottom: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
// color: Colors.yellow,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7-G-E4aXWzIoakYj-4VpNF8tp5hiaUC5K7yZGDaEjaNddIRMWcvV9lJU1_3F1q_RVqIM&usqp=CAU",
height: 75,
width: 75,
),
),
),
],
),
),
const SizedBox(
width: 12,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
// SizedBox(
// height: 3,
// ),
const Text(
"Branch",
style: TextStyle(
color: AppColors.lightGrey,
fontSize: 14,
fontWeight: FontWeight.w500),
),
const SizedBox(
height: 3,
),
Text(
"The Butcher Shop & Grill",
maxLines: 1,
softWrap: true,
// .toUpperCase(),
style: const TextStyle(
color: AppColors.lightGrey,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 6,
),
buildRatebar(12, 6, gap: .9),
]),
],
),
// Positioned(
// right: 20,
// child: GestureDetector(
// onTap: () => infoFunction(),
// child: Container(
// decoration: BoxDecoration(
// color: AppColors.lightGrey,
// borderRadius: BorderRadius.circular(20)),
// child: Padding(
// padding: EdgeInsets.all(3),
// child: Image.asset(
// IMAGE_ASSET_DIR + 'info_icon_single.png',
// height: 12,
// width: 12,
// color: dineIn ? AppColors.red : AppColors.orange,
// ),
// )),
// ),
// )
],
),
Padding(
padding: const EdgeInsets.only(right: 20, left: 20, top: 10),
child: Row(
children: [
if (dineIn) tblTextField,
// Text(
// '+ Enter Table #',
// style: TextStyle(
// color: AppColors.lightGrey,
// fontWeight: FontWeight.w500,
// fontSize: 14),
// ),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Styles.iconButtonWithShape(
Image.asset(
IMAGE_ASSET_DIR + 'location_icon.png',
height: 9,
color: dineIn ? AppColors.red : AppColors.orange,
),
// FaIcon(
// FontAwesomeIcons.locationArrow,
// color: dineIn ? AppColors.red : AppColors.orange,
// size: 12,
// ),
height: 22,
width: 22,
isCircle: true,
showShadow: false,
backgroundColor: dineIn
? AppColors.lightRed
: AppColors.lightOrange,
handler: () {}),
const SizedBox(
width: 6,
),
Text(
"5 KM",
style: TextStyle(
color: AppColors.lightGrey, fontSize: 12),
),
],
),
],
),
)
],
),
),
), // Add this code
);
}
#override
Widget? get flexibleSpace {
return ShaderMask(
// gradient layer ----------------------------
shaderCallback: (bound) {
return LinearGradient(
end: FractionalOffset.topCenter,
begin: FractionalOffset.bottomCenter,
colors: [
Colors.black.withOpacity(0.76),
Colors.black.withOpacity(0.66),
Colors.black26,
],
stops: [
0.0,
0.3,
0.45
]).createShader(bound);
},
blendMode: BlendMode.srcOver,
// your widget ------------------------
child: Container(
// constraints: const BoxConstraints(
// minWidth: 350,
// maxHeight: 350,
// ),
padding: EdgeInsets.all(10),
height: 350,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://media-cdn.tripadvisor.com/media/photo-s/1b/67/cc/f8/chestnut-restaurant.jpg'),
fit: BoxFit.cover),
)),
);
}
}