How to use PageView with Stack? - flutter

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

Answer 1

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.

Answer 2

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

Answer 3

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