CODEWITHSUNDEEP
flutterdart
Nikita Shpakau
Nikita Shpakau

Reputation: 113

Flutter SliverAppBar content resize on scroll down

I've got some issues with the sliver app bar and it's content. I want to resize the image in the flexibleSpace when I scroll down the content of SliverList (in a code down below), to fit image the top element in a list.

Right now, I have this (holding drag position here):click

And I want to come up with something like that (and bouncing back to initial expandedHeight on drag ended):click

Tbh, I don't have any ideas on how to achieve this behavior using the sliver app bar, any help would be appreciated!

Here is my code

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
        SliverAppBar(
          elevation: 0,
          expandedHeight: 360,
          floating: false,
          pinned: false,
          snap: false,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: false,
              title: Text('Running running'),
              background: Image.asset(
                'assets/images/excercise_3.jpg',
                fit: BoxFit.cover,
              )),
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          _TopInfo(),
          _MainContent(),
        ]))
      ]),
    );
  }

Upvotes: 4

Views: 5220

Answers (1)

51v4
51v4

Reputation: 1291

In SliverAppBar enable stretch property stretch: true, Add BouncingScrollPhysics() to CustomScrollView, also add stretchMode: [StretchMode.zoomBackground] in FlexibleSpaceBar widget as shown below;

  CustomScrollView(
    physics: const BouncingScrollPhysics(),
    slivers: [
      SliverAppBar(
        elevation: 0,
        expandedHeight: 360,
        floating: false,
        pinned: false,
        snap: false,
        stretch: true,
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: false,
          stretchModes: [StretchMode.zoomBackground],
          title: Text('Running running'),
          background: Image.asset(
            'assets/images/excercise_3.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(
          [
            _TopInfo(),
            _MainContent(),
          ],
        ),
      )
    ],
  ),

Expected Result

Upvotes: 16

Related Questions