PageView.builder inside SingleChildScrollView flutter

Question

I am trying to use PageView.builder inside SingleChildScrollView but I always get an error that say

RenderBox was not laid out: RenderRepaintBoundary#490ce relayoutBoundary=up15 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

here is part of the code

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
            child: PageView.builder(
          itemCount: 3,
          scrollDirection: Axis.horizontal,
          reverse: false,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(4.0)),
                ),
              ),
            );
          },
        )
.....

is there something that I should add from the code?

Can you try adding a fix height to the container.? – Krish Bhanushali Aug 25 '20 at 04:41 — Krish Bhanushali, Aug 25 '20 at 04:41
Hi..I have tried it but I still get an error – wahyu Aug 25 '20 at 04:55 — wahyu, Aug 25 '20 at 04:55

Moaz El-sawaf · Accepted Answer · 2020-08-25T05:28:00.507

3

If you want the child of the PageView widget to be scrollable then try to wrap the root widget of the itemBuilder method with the SingleChildScrollView widget and remove it from its current position.

So the code would be like that:

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: PageView.builder(
          itemCount: 3,
          scrollDirection: Axis.horizontal,
          reverse: false,
          itemBuilder: (BuildContext context, int index) {
            return SingleChildScrollView( // Moving this widget down to this position is the only change in the code...
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 4.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                ),
              ),
            );
          },
        ),
.....

The problem is that the SingleChildScrollView widget takes an infinite height because the scrolling functionality and the PageView widget tries to take all the available height so it's trying to take an infinite height and I think this is what causing the problem.

edited Aug 25 '20 at 05:28

answered Aug 25 '20 at 04:54

Moaz El-sawaf

2,306
1
16
33

Hi, thank you for your help...I delete my Singlechildscrollview and wrap my padding using Singlechildscrollview but I still get the error... is there something that I should add more? – wahyu Aug 25 '20 at 05:00
Moaz is right. The default behavior of ListView is to increase its size to fill the parente size. However, the scrollview is unbounded. To change this behavior you need to set shrinkwrap to true on the ListView. This will make the ListView ocupy just the size required by its children. – Gabriel Gava Aug 25 '20 at 05:05
I have tried my solution in your code and it worked as intended, I have edited my answer with the code after the change. – Moaz El-sawaf Aug 25 '20 at 05:24
1

I do mistake when I try it by my self...and your code helps me, thank you very much for your help and explanation @Moaz El-sawaf and Gabriel Gava – wahyu Aug 25 '20 at 06:10
My pleasure, Good Luck ❤ – Moaz El-sawaf Apr 05 '22 at 13:19

PageView.builder inside SingleChildScrollView flutter

1 Answers1