Agfdhyk

I need to implement the following layouts.

When I scroll the layout up, it becomes like this.

I want the following effect when when scrolled up and I want the same effect as first image when the scrolled is down. I want the widgets with description and the review to disappear slowly when the page is scrolled up and reappear when the page is scrolled down.

I am using following code:

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 servingn"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);

                    }),

                  )

                )

              )

            ],

          )

        )

      ),

    );

  }

}