Custom SliverAppBar with elements inside changing position or opacity

[mattermoran]

So here's the example of what I'm trying to achieve

As you can see the title scales down as user scrolls up. What I would also like to do is to change the position (like the text would in the center and as user scrolls it would move to the top left corner next to back button) or change opacity on scroll.
I don't think I can do that with default SliverAppBar so I thought I could do that with SliverPersistentHeader but I'm not sure how to proceed from there. I see that I can use ScrollPosition but I don't see any kind of event like onScroll with values in px.
So my question is am I doing something wrong or if not how do I continue?
Upd: here's the gist link with what I have right now
https://gist.github.com/mattermoran/d734ac4dae546b2f7ca194b5915a3832

[zoechi]

Please consider asking support questions in one of the other channels listed at http://flutter.io/support .

[Kartik1607]

Here is a quick hacked up sample code you can use.

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverPersistentHeader(
              pinned: true,
              delegate: _SliverAppBarDelegate(),
            ),
            SliverFillRemaining(
              child: Column(
                children: <Widget>[
                  Text('Text'),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  double scrollAnimationValue(double shrinkOffset) {
    double maxScrollAllowed = maxExtent - minExtent;
    return ((maxScrollAllowed - shrinkOffset) / maxScrollAllowed)
        .clamp(0, 1)
        .toDouble();
  }

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    final double visibleMainHeight = max(maxExtent - shrinkOffset, minExtent);
    final double animationVal = scrollAnimationValue(shrinkOffset);
    return Container(
      height: visibleMainHeight,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(color: Colors.blue),
          Opacity(
              opacity: animationVal,
              child: Image.network(
                "https://picsum.photos/500/500",
                fit: BoxFit.cover,
              )),
          Positioned(
            bottom: 0.0,
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Expanded(
                    flex: (animationVal * 100).toInt(),
                    child: Container(),
                  ),
                  Text("Lorem Ipsum Dolar Sit"),
                  Expanded(
                    flex: 100,
                    child: Container(),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  double get maxExtent => 300.0;

  @override
  double get minExtent => 56.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

[mattermoran]

@Kartik1607 thanks a lot! That is really helpful!

[urmatt]

@Kartik1607 👍👍👍

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.