Flutter: Combining ScrollView and PageView Widgets - flutter

Question

body: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(height: 600, color: Colors.red),
Container( // <------ Container A
child: PageView(
controller: _activityPanelController,
children: [
Container(height: 300, color: Colors.white),
Container(height: 300, color: Colors.blue),
],
),
),
],
),
),
),
I want to set the Container A's height to its child to use the PageView widget inside the SingleChildScrollView in this case.
How can I achieve to put the PageView widget inside the SingleChildScrollView widget?

Answer 1

Unfortunately, you can't make PageView as high as it's children. You'd do so with IntrinsicHeight widget and by removing SizedBox, but you'll get the following error:
The following assertion was thrown during performLayout():
RenderViewport does not support returning intrinsic dimensions.
Also, you can't get rid of the SizedBox, because of the ListView (the same happens with Column and SingleChildScrollView), it's children get unbounded height, and PageView tries to get as big as possible. After removing SizedBox, you'll see this:
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Working example:
#override
Widget build(BuildContext context) {
final boxHeight = 600.0;
return ListView(
children: <Widget>[
Container(height: boxHeight, color: Colors.red),
Container(height: boxHeight, color: Colors.deepPurpleAccent),
SizedBox(
height: boxHeight,
child: PageView(
controller: PageController(),
children: [
// ...
].map((e) => SingleChildScrollView(child: e)).toList(),
),
),
],
);
}
https://www.dartpad.dev/619458e188ce97f9cd1272441b7a3bf3?null_safety=true