I am trying to combine two complex views from flutter. Basic idea is that I wanna have a sliver effect with an image that moves about when scrolling the screen. A note to mention is that im trying to implement this for a flutter web view.
So far I will paste the code I've came up with and I may need some expert help in achieving this. I need the entire view (sliver + tab bar + tab views) to be scrolled up and down in a single scroll effect. So far in the ui I have a top container kind of like a search bar, then image shows then the sliver app bar. when scrolling up the screen should hide the image and only should show top to bottom , the search bar container then sliver title bar(app bar), then the tab bars(tab bar headers), then the relevant tab view. when scrolling up to see the bottom of the tab view I need the tab bar view to be always shown to the user. I tried so many refactors from the net but still fails to achieve my goal.
appreciate if someone can help me out with my code.
The Code
Widget build(BuildContext context) {
return
Container(
color: Colors.white,
child: Stack(
children: [
Container(
height: 60,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.5,
color: Colors.grey.withOpacity(0.5),
),
),
),
child: const TabAppBar(title: 'search bar'),
),
Padding(
padding: const EdgeInsets.only(top: 60.0),
child: CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Colors.white,
automaticallyImplyLeading: false,
floating: true,
pinned: true,
expandedHeight: 320,
collapsedHeight: 60,
flexibleSpace: FlexibleSpaceBar(
background: Row(
children: [
Expanded(
flex: 4,
child:
SizedBox(
height: 320,
width: MediaQuery.of(context).size.width,
child: Image.asset(
'../../assets/images/banner.png',
fit: BoxFit.cover,
opacity: const AlwaysStoppedAnimation(.75),
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child:
const Text(
'83/100',
style: TextStyle(fontSize: 48.0),
),
),
),
],
),
centerTitle: false,
titlePadding: EdgeInsets.only(left: 10, bottom: 10),
title: Text('text here),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[600],
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[800],
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[600],
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[800],
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[600],
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Container(
height: 100,
color: Colors.blue[800],
),
),
),
),
],
),
),
],
),
);
}
appreciate if someone can help me out with my code.
