在silverappbar向上滚动时隐藏小部件

Question

我需要实现以下布局。

当我向上滚动布局时，它会变成这样。

当向上滚动时，我希望具有以下效果；向下滚动时，我希望与第一张图像具有相同的效果。我希望带有说明和评论的小部件在向上滚动页面时缓慢消失，而在向下滚动页面时重新出现。

我正在使用以下代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:mamham/ui/ReviewWidget.dart';
import 'package:flutter_image/network.dart';
import 'package:mamham/TestStrings.dart';
import 'package:mamham/model/Product.dart';
import 'package:mamham/model/Serializers.dart';
import 'package:mamham/ui/ProductSingle.dart';
import 'package:mamham/pages/cart/CartPage.dart';
import 'package:mamham/Strings.dart';

class RestaurantPage extends StatefulWidget {
  RestaurantPage( {Key key, this.title} ) : super(key: key);

  final String title;

  @override
  _RestaurantPageState createState() => _RestaurantPageState();
}

class _RestaurantPageState extends State<RestaurantPage> with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  AnimationController _bannerImageAnimationController;
  Animation _bannerImageAnimation;

  @override
  void initState() {
    super.initState();
    _scrollViewController = ScrollController();
    _bannerImageAnimationController = AnimationController(
      duration: Duration(milliseconds: 2000),
      vsync: this
    );
    _bannerImageAnimation = Tween(begin: 300.0, end: 150.0).animate(_bannerImageAnimationController)
    ..addListener((){
      setState((){});
    });

    _bannerImageAnimationController.forward();
  }

  @override
  void dispose() {
    _scrollViewController.dispose();
    _bannerImageAnimationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: NestedScrollView(
        controller: _scrollViewController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(      
              expandedHeight: size.height * 0.50,                             
              pinned: true,
              floating: false,
              forceElevated: innerBoxIsScrolled,              
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.search), 
                  onPressed: () {},
                ),
                IconButton(
                  icon: Icon(Icons.shopping_cart),
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => CartPage(title: Strings.PAGE_CART)));
                  },
                )
              ],      
              flexibleSpace: FlexibleSpaceBar(
                background: Container( 
                  height: size.height * 0.5,
                  child: Image(
                    fit: BoxFit.fill,
                    image: NetworkImageWithRetry('https://via.placeholder.com/300'),
                  ),                             
                ),
                title: Container(
                  child: Column(
                    mainAxisAlignment:  MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.center,                 
                    children: <Widget>[
                      Text('Mamham\'s Kitchen'),
                      Text('We believe in serving\n"Food With Love"', style: TextStyle(color: Colors.white, fontSize: 12.0),),
                      ReviewWidget(reviewCount: 3.5, size: 12.0)
                    ],
                  ),
                ),
              ),           
            ),
          ];
        },
        body: SafeArea(
          bottom: true,
          child: Column(
            children: <Widget>[              

              // Product Listing
              Expanded(
                child: Container(
                  width: double.infinity,
                  child: GridView.count(
                    crossAxisCount: 2,
                    children: List.generate(100, (index) {
                      final parsedJson = json.decode(TestStrings.PRODUCT_JSON);
                      Product product = serializers.deserializeWith(Product.serializer, parsedJson);

                      return ProductSingle(product: product);
                    }),
                  )
                )
              )
            ],
          )
        )
      ),
    );
  }
}