0

I got a Container with a PageView inside which contains a handfull of Columns inside. Whenever the page is changed, a different height is assigned to the height of the Container. If the current page is 350 in size and the next should be 735, i get a "RenderFlex overflow by 355 pixels on the bottom" error.

GIF to demonstrate the problem

Here is the code:

child: Container(
  height: _pageViewHeight,
  child: PageView(
    controller: _pageController,
    onPageChanged: (int page) {
      setState(() {
        _currentPage = page;
        _pageViewHeight = _heights[page];
      });
    },
    children: <Widget>[

      Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 60),
            child: Image(
              image: AssetImage('assets/images/3_todo.png'),
              width: 100,
              height: 100,
            ),
          ),
        ],
      ),

      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Align(
              child: Text(
                "Download your data",
                style: TextStyle(
                  fontSize: 32,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image(
                image: AssetImage(
              'assets/images/json_tutorial.gif',
            )),
          ),
        ],
      ),
    ]),
),
Row(
    children: [_button(_currentPage)],
)

_heights[] contains the two heights.

When I go to the second page, I get the following error:

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 355 pixels on the bottom.

The relevant error-causing widget was
Column
lib\views\onboarding.dart:176
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

This is how it looks like while changing

And this is how it looks when changed

Is there a way to have dynamically changing sizes without this error?

DeadRabbit
  • 1
  • 1
  • Does this answer your question? [Flutter: adjust height of PageView/Horizontal ListView based on current child](https://stackoverflow.com/questions/54522980/flutter-adjust-height-of-pageview-horizontal-listview-based-on-current-child) – Sahdeep Singh Jan 28 '21 at 19:00
  • To me it looks like you column does not fit the size of 735. It is larger than 735 pixels, but the container is only 735 pixels large, which is why you get a RenderFlex error – Casper Koch Jan 28 '21 at 21:47
  • I've tried to increase the 735 with no succes. The problem is, that the height isn't changed before the animation is half way finished, so the second page tries to fit into the first height untill the new height is applied. So I think one solution would be to change the height before the page changes, but I don't know how. – DeadRabbit Jan 29 '21 at 12:06

1 Answers1

0

Use media query for your problem. The full screen ratio is 1. Now define a ratio and it will not overflow .

Var ratio = MediaQuery.of(context).size;

container(height: ratio.height * 0.5,
          width : ratio.width*0.5,
          child: yourWidget(),
         )
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Tasnuva Tavasum oshin
  • 1
  • 1
  • 17
  • 28
  • I've tried this solution, but it doesn't solve my problem. But still a nice addition to my programm. I've added a gif to demonstrate my problem better – DeadRabbit Jan 30 '21 at 12:58