title: Is it possible to have both 'expand' and 'contract' effects with the slivers in Flutter?
body: <p>I have implemented a screen with the <code>CustomScrollView</code>, <code>SliverAppBar</code> and <code>FlexibleSpaceBar</code> like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/TrXLG.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TrXLG.gif" alt="enter image description here"></a>  </p>
  
  <p>Now, I'm stuck trying to further expand the functionality by trying to replicate the following effect:</p>
  
  <p><a href="https://streamable.com/gpsqg" rel="nofollow noreferrer">Expand image to fullscreen on scroll</a></p>
  
  <p>Can something like this be done by using the <code>slivers</code> in Flutter?</p>
  
  <p>Basically, I want the image in it's initial size when screen opens, but depending on scroll direction, it should animate -> contract/fade (keeping the list scrolling functionality) or expand to fullscreen (maybe to new route?).</p>
  
  <p>Please help as I'm not sure in which direction I should go.</p>
  
  <p>Here's the code for the above screen:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    static const double bottomNavigationBarHeight = 48;
  
    @override
    Widget build(BuildContext context) =&gt; MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SliverPage(),
        );
  }
  
  class SliverPage extends StatefulWidget {
    @override
    _SliverPageState createState() =&gt; _SliverPageState();
  }
  
  class _SliverPageState extends State&lt;SliverPage&gt; {
    double appBarHeight = 0.0;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: CustomScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          slivers: &lt;Widget&gt;[
            SliverAppBar(
              centerTitle: true,
              expandedHeight: MediaQuery.of(context).size.height * 0.4,
              pinned: true,
              flexibleSpace: LayoutBuilder(builder: (context, boxConstraints) {
                appBarHeight = boxConstraints.biggest.height;
                return FlexibleSpaceBar(
                  centerTitle: true,
                  title: AnimatedOpacity(
                      duration: Duration(milliseconds: 200),
                      opacity: appBarHeight &lt; 80 + MediaQuery.of(context).padding.top ? 1 : 0,
                      child: Padding(padding: EdgeInsets.only(bottom: 2), child: Text("TEXT"))),
                  background: Image.network(
                    'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940',
                    fit: BoxFit.cover,
                  ),
                );
              }),
            ),
            SliverList(delegate: SliverChildListDelegate(_buildList(40))),
          ],
        ),
      );
    }
  
    List _buildList(int count) {
      List&lt;Widget&gt; listItems = List();
  
      for (int i = 0; i &lt; count; i++) {
        listItems.add(
            new Padding(padding: new EdgeInsets.all(20.0), child: new Text('Item ${i.toString()}', style: new TextStyle(fontSize: 25.0))));
      }
  
      return listItems;
    }
  }
  </code></pre>