fluttergridviewstaggered-gridviewflutter-exception

Flutter “RenderFlex children have non-zero flex but incoming height constraints are unbounded.” when using Staggered Grid View~ @_@


                                   @_@

I was thinking to make the widgets inside the GridView to have a different height according to their dynamic content height.

The widget looks like this:

Container(
      decoration: BoxDecoration(
        color: someColor,
        borderRadius: BorderRadius.circular(17),
      ),
      child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(17),
              child: AspectRatio(
                aspectRatio: 5 / 3,
                child: Image.network(someImageUrl, fit: BoxFit.cover),
              ),
            ),
            SizedBox(height: 10),
            Text('Group name'),
            Text('Group desc'),
            SizedBox(height: 10),
            Expanded(
              child: Row(
                children: List.generate(
                  _group.popIds.length,
                  (_) => SizedBox(width: 50, height: 50),
                ),
              ),
            ),
            Text('Hello')
          ],
        ),
    );

And this is the screen that holds those widgets:

Scaffold(
          body: Padding(
            padding:
                const EdgeInsets.only(left: 17.0, right: 17.0, top: 50),
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 20,
              itemCount: 50,
              itemBuilder: (context, index) => GroupItem(),
              staggeredTileBuilder: (index) => StaggeredTile.fit(1),
            ),
          ),
        );

And here is the error message:

** RenderFlex children have non-zero flex but incoming height constraints are unbounded. & RenderBox was not laid out: RenderFlex#f808c relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize'

**

Are there some genius can help me with this issue, since I've been struggling with it for a whole day!~ @_@


Solution

  • You can copy paste run full code below
    Step 1: Column use mainAxisSize: MainAxisSize.min
    Step 2: Change Expanded to Flexible
    Step 3: Change Row to Wrap
    code snippet

    child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(17),
                      child: AspectRatio(
                        aspectRatio: 5 / 3,
                        child: Image.network("https://picsum.photos/250?image=9",
                            fit: BoxFit.cover),
                      ),
                    ),
                    SizedBox(height: 10),
                    Text('Group name'),
                    Text('Group desc'),
                    SizedBox(height: 10),
                    Flexible(
                      child: Wrap(
                        children: List.generate(
                          Random().nextInt(5) + 1,
                          (_) => SizedBox(width: 50, height: 50),
                        ),
                      ),
                    ),
                    Text('Hello')
                  ],
                ),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
    import 'dart:math';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.only(left: 17.0, right: 17.0, top: 50),
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 20,
              itemCount: 50,
              itemBuilder: (context, index) => Container(
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(17),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(17),
                      child: AspectRatio(
                        aspectRatio: 5 / 3,
                        child: Image.network("https://picsum.photos/250?image=9",
                            fit: BoxFit.cover),
                      ),
                    ),
                    SizedBox(height: 10),
                    Text('Group name'),
                    Text('Group desc'),
                    SizedBox(height: 10),
                    Flexible(
                      child: Wrap(
                        children: List.generate(
                          Random().nextInt(5) + 1,
                          (_) => SizedBox(width: 50, height: 50),
                        ),
                      ),
                    ),
                    Text('Hello')
                  ],
                ),
              ),
              staggeredTileBuilder: (index) => StaggeredTile.fit(1),
            ),
          ),
        );
        ;
      }
    }