[FIXED] PageView not showing inside SingleChildScrollView

Issue

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

Solution

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

Answered By - Yeasin Sheikh