I want to show AppBar when the first child of ListVIew is scroll over like iOS style (particularly behavior in native Books app in iOS). A lot of Apps in iOS do have this feature so I think it is a common behavior in iOS. But I don't know how to apply it to Flutter with Material Style. Does anyone know a solution to this one? The GIF below shows the behavior that I want to implement: Behavior with Appbar iOS Style


Solution 1: jatinkumar

Yes, you can do it in MaterialApp by using SliverAppBar with CustomScrollView in the body section of scaffold. You can use SliverAppBar instead of normal appBar The widgets which you will be using should be inside the
SliverList( delegate: SliverChildListDelegate( [ ]))

return Scaffold(

  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text(
           "Reading Now",
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
            textAlign: TextAlign.end,
          ),
          background: Image.network(
              https://i.stack.imgur.com/1lN0b.png,
              fit: BoxFit.fill,
            ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(
          [

//widgets which you are going to use inside the listview you can use them in 
//sliverList
                ]
              ),//SliverChildListDelegate
          ),//SliverList
    ],//sliver Widgets
  ),//customScrollView