A RenderFlex overflowed on Hero Animation - Flutter

Question

Hi guys. This is my question: I have two screens: home-screen.dart and all-categories.dart . When I navigate from one to animate the CategoriesWidget() with a HeroAnimation . The animation works, but I'm having this error both in my physical device and also in the iOS emulator. The CategoriesWidget() is the same in both screens, only the number of cards are changing, but I think that this is not the problem, because If I put the same number of cards in both the problem is still happening.

HomeScreen

body: ListView(
        padding: EdgeInsets.only(left: 20.0, top: 50.0, right: 20.0),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // navBar
              randomPhrase(),
              searchBarHome(),
            ],
          ),
          Hero(
            tag: 'categories',
              child: CategoriesWidget(5, true)),
        ],
      ),

AllCategories Screen

body: ListView(
        padding: EdgeInsets.only(left: 20.0, top: 50.0, right: 20.0),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 10.0),
              Text(
                'Explora nuestras categorias',
                style: kSubheadingextStyle.copyWith(
                  fontSize: 22.0,
                  height: 1.5,
                ),
              ),
              Hero(
                  tag: 'categories',
                  child: CategoriesWidget(categoriesData.length, false)),
            ],
          ),
        ],
      ),

The Error in the Console
════════ (39) Exception caught by rendering library ════════════════════════════════════════════════
A RenderFlex overflowed by 45 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///Users/joansubiratsllaveria/AndroidStudioProjects/giramos_app/giramos/lib/components/categories.dart:35:20
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

What's happening is that your widgets are too big for their parents. The way that the render engine works for flutter is that the parents set the constraints of the child widgets, and the children themselves set their sizes. In this case, the height of one of your widgets is larger than the constraints set by the parent.

There are different ways to approach resolving this:

1. You can do what @RandomGuru suggests and reduce the size of the widget (or increase the constraints of the parent) This would involve increasing the SizedBox(height:10) by 45 pixels or decreasing the side of the text by 45 pixels.

2. Use a flexible widget inside. Instead of using a sizedbox, you could instead use Expanded so that it takes up the available space (instead of you setting it directly)

3. Use flexible text. I love, love, love the AutoSizeText plugin for cases like this. https://pub.dev/packages/auto_size_text It changes the font size based on the constraints of the parents, and helps you avoid situations where text is making you overflow. Also, there is a AutoSizeGroup setting that allows you to set the text size based on the most limiting case, so that you don't have different text sizes in different cards.

4. Use a scroll widget. Wrap the stuff that is overflowing in a scrollable widget like Listview, CustomScrollWidget, or SingleChildScrollView. In this case, it's obviously not appropriate since it would be weird to scroll the information on the card while it is inside of a scrollable listview... however, it's always something to keep in mind when you overflow.

I highly, highly, highly recommend reading this medium article on the quirks of layout: https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2 Specifically, example 24 and the following go over dealing with large text strings.