Questions lead

Learning about Flutter, I encountered a problem when developing the current native APP with Flutter into the homepage:

I am frustrated that I cannot display the GridViewView when using it. I used the GridView in Column.

@override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).padding.top,
          color: ColorDef.colorPrimary,
        ),
        Weather(),
        Container(
          padding: EdgeInsets.fromLTRB(
              Dimens.marginWindow, 0, Dimens.marginWindow, 0),
          child: GridView.count( 
            crossAxisCount: 3,
            mainAxisSpacing: 15,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(userResList.length, (index) {
              returngetChild(index); }),),],); }Copy the code

When run, the console output is as follows

I/flutter ( 8000): ═ ═ ╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ ═ I/flutter (8000) : The following assertion was thrown during performResize(): I/flutter ( 8000): Vertical viewport was given unbounded height. I/flutter ( 8000): Viewports expandin the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 8000): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 8000): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 8000): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 8000): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 8000): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 8000): the height of the viewport to the sum of the heights of its children.
Copy the code

Our GridView(also a scrollable widget) needs to be wrapped inside another scrollable widget another scrollable widget.); (‘ There will always be enough vertical space for the children.’) Column cannot provide enough vertical space for the GridView

Otherwise,’using the “shrinkWrap” property’

Solution 1

Now that it’s easier to use the ‘shrinkWrap’ property, I’ve added ‘shrinkWrap: true,’ to the GridView

If GridView content is not out of sight, there will be no prompt (‘BOTTOM OVERFLOWED BY 142 PIXELS’) so you can ensure that you are learning English in this way, otherwise look at solution 2

To solve the 2

‘a scrollable widget is nested inside another scrollable widget.’

Wrapping our GridView with a scrollable Widget looks like this:

Expanded(
          child: Container(
            padding: EdgeInsets.fromLTRB(
                Dimens.marginWindow, 0, Dimens.marginWindow, 0),
            child: GridView.count(
              crossAxisCount: 3,
              childAspectRatio: 5 / 4,
              children: List.generate(userResList.length, (index) {
                returngetChild(index); }),),),),Copy the code