How to use PageView with Stack?

Question

I'm new to Flutter and I like the PageView widget, but how do I always have an AppBar or other elements on top? Now PageView is changing the entire page, along with the AppBar, how can you pin it? To make the pages scroll under the AppBar

Scaffold(
  body: Stack(
    children: [
      Padding(
        padding: EdgeInsets.only(top: 50),
        child: Container(
          width: double.infinity,
          height: 100,
          color: Colors.blue,
        ),
      ),
      FutureBuilder(
          future: _futureMenu,
          builder: (context, snapshot){
            if(snapshot.hasData){
              return PageView.builder(
                itemBuilder: (context, position) {
                  return PageForPosition();
                },
                itemCount: snapshot.data.length, // Can be null
              );
            } else if (snapshot.hasError){

            }
            return Container(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }
      ),
    ],
  ),
)

Please provide some code or snippet. Your question is not clear — Gourango Sutradhar, Jan 20 '21 at 07:49
I inserted part of the code, I need the AppBar to always be on the screen (not moving along with the PageView), as if the first layer of the application — Alexander Schurf, Jan 20 '21 at 07:53
Is that a requirement that you want to use a stack? rather that appBar? — Gourango Sutradhar, Jan 20 '21 at 07:55
I changed the example, so it is more clear what I want to get as a result — Alexander Schurf, Jan 20 '21 at 08:11
In my example, I want the Container to be on top of all pages, but it is hidden behind the PageView — Alexander Schurf, Jan 20 '21 at 08:12
I understand, please be refered to my answer. I hope it will help you. — Gourango Sutradhar, Jan 20 '21 at 11:12

Ratakondala Arun · Answer 1 · 2021-01-20T08:14:50.100

Place the AppBar widget in scaffold appBar parameter.

Scaffold(
  appBar: AppBar(),//<-- Move appbar here.
  body: Stack(
    children: [
      FutureBuilder(
          future: _futureMenu,
          builder: (context, snapshot){
            if(snapshot.hasData){
              return PageView.builder(
                itemBuilder: (context, position) {
                  return PageForPosition();
                },
                itemCount: snapshot.data.length, // Can be null
              );
            } else if (snapshot.hasError){
               return Center(child:Text('Error'));
            }
            return Container(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }
      ),
    ],
  ),
)

Check this dart pad.

score 0 · Answer 2 · answered Jan 20 '21 at 08:46

You could try use sliverAppbar code like this

SliverAppBar(
              expandedHeight: 300.0,
              pinned: true,

Pinned allows it to stay fixed to the top if you need additional help on this way of creating an app bar let me know happy to help further explain

score 0 · Answer 3 · answered Jan 20 '21 at 11:13

You can use CustomScrollView like below to gain your UI and effect.

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('Grid Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ],
)

How to use PageView with Stack?

3 Answers3