How to create Expandable/Contractable Horizontal ListView?

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),
      )
    ],
  ),
);