PageView is causing unbounded height error - flutter

Question

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void openModal() {
showModalBottomSheet<dynamic>(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20))),
context: context,
builder: (_) {
return Wrap(
children: [
ModalSheetContent(),
],
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FloatingActionButton(
onPressed: openModal,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
);
}
}
class ModalSheetContent extends StatefulWidget {
const ModalSheetContent({Key? key}) : super(key: key);
#override
_ModalSheetContentState createState() => _ModalSheetContentState();
}
class _ModalSheetContentState extends State<ModalSheetContent> {
final PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: PageView(
controller: pageController,
children: [imageVideo(context), Pricing()],
),
);
}
I want the modalSheet to take the dynamic height according to its content and not full screen. I tried wrapping PageView with Column and Expanded but it didn't work.
Error:
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.The relevant error-causing widget was PageView

Answer 1

PageView must have a height in flutter, usually it takes the biggest part of the screen but in your case you are showing it inside a bottomsheet, I assume that your bottomsheet should be almost full screen, so try to give it a height
final size = MediaQuery.of(context).size;
……
SizedBox(
height: size.height - 100;
child: PageView(…),
)

Answer 2

If you want that your bottom sheet takes dynamic height according to its context, simple wrap your widget into column widget and add this attribute.
Column(
mainAxisSize:MainAxisSize.min,
children:[...]
)