Appbar hide/show like iOS Style

user_10398593 0
Viewed 1452

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

flutter-appbar flutter-listview flutter
1 Answers

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
user_106186550
Related