How to create Expandable/Contractable Horizontal ListView? - flutter

Question

I am quite new to flutter, but I want to create an app in which my main vertical list could be dragged from bottom part of the screen to above part and when I do that my horizontal listview(as shown in image) will fade away, for this I thought of using SliverAppBar, but I don't know how to add Horizontal ListView to it.
I want to achieve UI something like this.

Answer 1

For starter, try this if you want a SliverAppBar approach but I recommend using a two List instead. One horizontal and one vertical
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
centerTitle: true,
pinned: true,
elevation: 4,
floating: true,
title: Text(
'Subscribe Now',
style: TextStyle(color: Colors.white),
),
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.all(0),
collapseMode: CollapseMode.pin,
background: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.indigoAccent,
margin: EdgeInsets.only(left: 20, bottom: 16, top: 180),
child: SizedBox(
height: 100,
width: 100,
child: Center(
child: Text('Item No. $index'),
),
),
);
}),
),
),
SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
),
padding: const EdgeInsets.all(22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Get 7 days free',
style: Theme.of(context)
.textTheme
.headline
.copyWith(color: Colors.white),
),
const SizedBox(
height: 2,
),
Text(
'Save 50% off',
style: Theme.of(context)
.textTheme
.button
.copyWith(color: Colors.greenAccent),
),
const SizedBox(
height: 6,
),
Text(
'\$60',
style: Theme.of(context).textTheme.headline.copyWith(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 28),
)
],
),
);
}, childCount: 10),
)
],
),
);