I created ViewPager using PageView but when i put it inside SingleChildScrollView it stops showing.However when i put it outside SingleChildScrollView it shows fine.How to show PageView inside SingleChildScrollView?
Expanded(
flex: 8,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
margin: const EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 0),
child: Padding(
padding:
const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
child: promoPager())),
],
),
),
)
Widget promoPager() {
final PageController controller = PageController();
return Stack(
children: [
PageView(
controller: controller,
onPageChanged: (int page) {
setState(() {
tabController?.index = page;
});
},
children: const [
Image(
image: AssetImage('assets/dubai.jpg'), fit: BoxFit.fill),
Image(
image: AssetImage('assets/webcheckin.jpg'),
fit: BoxFit.fill),
Image(
image: AssetImage('assets/maldives.gif'),
fit: BoxFit.fill),
Image(
image: AssetImage('assets/giraffe.jpg'), fit: BoxFit.fill)
]),
Positioned(
bottom: 5,
right: 5,
child: TabPageSelector(
controller: tabController,
selectedColor: const Color(0xffea2330)))
],
);
My widget tree:- SinglechildScrollView->Column->Card->Padding->Stack->pageview
CodePudding user response:
Providing height for PageView
fix the issue. You can use SizedBox(height:x)
or AspectRatio
and use images aspect ratio here.
More about PageView and AspectRatio