CODEWITHSUNDEEP
flutterdartflutter-pageview
Alexander Schurf
Alexander Schurf

Reputation: 85

How to use PageView with Stack?

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(),
              ),
            );
          }
      ),
    ],
  ),
)

Upvotes: 0

Views: 1467

Answers (3)

Gourango Sutradhar
Gourango Sutradhar

Reputation: 1619

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'),
          );
        },
      ),
    ),
  ],
)

Upvotes: 0

Kyle Noome
Kyle Noome

Reputation: 26

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

Upvotes: 0

Ratakondala Arun
Ratakondala Arun

Reputation: 156

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.

Upvotes: 1

Related Questions