Flutter, how to struct gridview structure normally?

Question

I'm implementing to show images by GridView and learning BloC pattern, but my implementation is continuing an error about rendering problem.

For the long time, I tried to find the solution but I didn't catch that. Below is my code and What is the problem of this code structure?

@override
    Widget build(BuildContext context) {
      return StreamBuilder(
        stream: bloc.state,
        builder: (BuildContext context, AsyncSnapshot<WebtoonState> snapshot){
          final state = snapshot.data;
          return Scaffold(
            body: Column(
                children: <Widget>[
                  SizedBox(height: 40.0),
                  RaisedButton(
                    child: Text(
                      '웹툰!!',
                      style: TextStyle(
                        color: Colors.black
                      ),
                    ),
                    color: Colors.orange,
                    onPressed: () => bloc.onDayChanged.add('mon'),
                  ),
                  SizedBox(height: 40.0),
                  Stack(
                    children: <Widget>[
                      WebtoonLoadingWidget(visible: state is WebtoonLoading),
                      WebtoonResultWidget(
                        items: state is WebtoonDone ? state.result.items : [],
                      )
                    ],
                  )
                ],
              ),
          );
        },
      );
    }

WebtoonResultWidget

Widget build(BuildContext context) {
      return AnimatedOpacity(
        duration: Duration(milliseconds: 300),
        opacity: visible ? 1.0 : 0.0,
        child: GridView.count(
              shrinkWrap: true,
              crossAxisCount: 3,
              childAspectRatio: 0.6,
              children: List.generate(items.length, (index){
                return Column(
                  children: <Widget>[
                    Image.network(
                      items[index].imgUrl,
                      scale: 0.5
                    ),
                    Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Column(
                        children: <Widget>[
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              items[index].title,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          Text(
                            "★ " + items[index].rate,
                            style: TextStyle(
                              color: Colors.red,
                              fontWeight: FontWeight.bold
                            ),
                          ),
                          Expanded(child: Container()),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              items[index].artist,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                );
              }),
            ),
      );
    }

My error logs...

I/flutter (28386): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (28386): The following assertion was thrown during performLayout(): I/flutter (28386): 'package:flutter/src/rendering/object.dart': Failed assertion: line 1578 pos 12: I/flutter (28386): '!_debugDoingThisLayout': is not true. I/flutter (28386): I/flutter (28386): Either the assertion indicates an error in the framework itself, or we should provide substantially I/flutter (28386): more information in this error message to help you determine and fix the underlying cause. I/flutter (28386): In either case, please report this assertion by filing a bug on GitHub: I/flutter (28386):
https://github.com/flutter/flutter/issues/new?template=BUG.md I/flutter (28386): I/flutter (28386): When the exception was thrown, this was the stack: I/flutter (28386): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1578:12) I/flutter (28386):

3 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) I/flutter (28386): #4

RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)

Answer 1

Wrap column with the Container widget and give it fixed size. I resolve this same issue by adding fixed hight.

Container(
    color: Colors.white,
    height: 110,
    padding: EdgeInsets.only(left: getSizeOf(20)),
    alignment: Alignment.topCenter,
    child: new Row(
      children: <Widget>[
        new Expanded(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
              Text(
                exercise.title,
                style: TextStyle(
                  fontSize: getSizeOf(20),
                  fontFamily: Constant.fontRegular,
                ),
              ),
              SizedBox(height: 5.0),
              exercise.categoriesData.length > 3
                  // ? showFirstThreeCategoryTags(exercise.categoriesData, getTagView, 26)
                  ? showFirstThree(exercise.categoriesData)
                  : Wrap(
                      direction: Axis.horizontal,
                      crossAxisAlignment: WrapCrossAlignment.start,
                      alignment: WrapAlignment.start,
                      spacing: 1,
                      children:
                          exercise.categoriesData.map((Category tagCate) {
                        return getTagView(tagCate);
                      }).toList()),
            ])),
        loadFirebaseImage(exercise.images[0], 100, context, exercise.images)
      ],
    ));