Show appBar when scrolling

Question

I would like to show appBar when scrolling, like video below

https://i.sstatic.net/AZerp.jpg

This is what I have now, but appBar not showing when scroll

https://i.sstatic.net/TVcj1.jpg

Here the code

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _showButton(),
      backgroundColor: Colors.grey.shade200,
      extendBodyBehindAppBar: true,
      // appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
      body: CustomScrollView(slivers: [
        SliverAppBar(expandedHeight:  MediaQuery.of(context).size.width,
        flexibleSpace: FlexibleSpaceBar(
          title: Text("This is sample"),
          background: _showPropertyUnitImage(),
        ),),SliverList(delegate: SliverChildListDelegate([
          _showWidget(context)
        ]))
      ],)
    );
  }

Can some assist me to the right direction? Thanks

Answer 1

Code:

import 'package:flutter/material.dart';
import 'package:flutter_advanced_drawer/flutter_advanced_drawer.dart';
import 'package:google_fonts/google_fonts.dart';
import '../configurations/size_config.dart';



class CustomScrollViewScreen extends StatefulWidget {
  const CustomScrollViewScreen({Key? key}) : super(key: key);

  @override
  State<CustomScrollViewScreen> createState() => _CustomScrollViewScreenState();
}

class _CustomScrollViewScreenState extends State<CustomScrollViewScreen> with TickerProviderStateMixin {



  final _advancedDrawerController = AdvancedDrawerController();
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      backgroundColor: Colors.red,
      body: NestedScrollView(
          headerSliverBuilder:
              (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                elevation: 0,
                backgroundColor: Colors.white,
                centerTitle: true,
                title: Text("Strawberry pearl",
                    style: GoogleFonts.inter(color: Colors.blue,

                      fontWeight: FontWeight.bold,
                      fontSize: SizeConfig.screenHeight! * 0.026,
                    )),
                leading: IconButton(
                  onPressed: (){

                  },
                  icon: ValueListenableBuilder<AdvancedDrawerValue>(
                    valueListenable: _advancedDrawerController,
                    builder: (_, value, __) {
                      return AnimatedSwitcher(
                        duration: Duration(milliseconds: 250),
                        child: Icon(
                          Icons.clear,
                          color: Colors.blue,
                        ),
                      );
                    },
                  ),
                ),
                expandedHeight: SizeConfig.screenHeight! * 0.3,
                pinned: true,
                forceElevated: true,
                flexibleSpace: Stack(
                  children: [
                    FlexibleSpaceBar(
                      background: Image.asset(
                        "assets/download.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),

                  ],
                ),
              ),

            ];
          }, body: Text(""),

      ),
    );
  }


}

Video demo