La fenêtre verticale a reçu une hauteur non limitée.

Question

Voici mon code :

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

Exception comme suit :

I/flutter ( 9925):  EXCEPTION CAUGHT BY RENDERING LIBRARY 
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)

Answer 1

Ajout de ces deux lignes

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...

Answer 2

Cela se produit généralement lorsque vous essayez d'utiliser un ListView / GridView à l'intérieur d'un Column Il existe de nombreuses façons de résoudre le problème, j'en énumère quelques-unes ici.

1. Enveloppe ListView en Expanded

   Column(
     children: <Widget>[
       Expanded( // wrap in Expanded
         child: ListView(...),
       ),
     ],
   )

2. Enveloppe ListView en SizedBox et donner un height

   Column(
     children: <Widget>[
       SizedBox(
         height: 400, // fixed height
         child: ListView(...),
       ),
     ],
   )

3. Utilisez shrinkWrap: true en ListView .

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // use this
       ),
     ],
   )

Answer 3

Donc, tout le monde a posté des réponses mais personne ne s'est soucié d'expliquer pourquoi : Je vais copier la documentation sur shrinkWrap :

Indique si l'étendue de la vue défilante dans la [scrollDirection] doit être déterminée par le contenu affiché. déterminée par le contenu visualisé.

Si la vue défilante n'est pas rétractée, la vue défilante s'agrandit. à la taille maximale autorisée dans la [scrollDirection]. Si la vue défilante a des contraintes non limitées dans la [scrollDirection], [shrinkWrap] doit être vrai. être vrai.

Le rétrécissement du contenu de la vue en défilement est nettement plus beaucoup plus coûteuse que l'expansion à la taille maximale autorisée, car le contenu peut s'étendre et se contracter pendant le défilement, ce qui signifie que la taille de la de la vue défilante doit être recalculée chaque fois que la position de défilement change.

La valeur par défaut est false .

Donc, en prenant le vocabulaire des docs, ce qui se passe ici est que notre ListView est dans une situation de contraintes non limitées (dans la direction où l'on fait défiler les pages), donc l'élément ListView se plaindra que :

... une fenêtre verticale a reçu une quantité illimitée d'espace vertical dans lequel pour s'étendre.

En fixant simplement shrinkWrap a true s'assurera qu'il enveloppe sa taille définie par le contenu. Un exemple de code pour illustrer :

// ...
  ListView(
    // Says to the `ListView` that it must wrap its
    // height (if it's vertical) and width (if it's horizontal).
    shrinkWrap: true,
  ),
// ...

C'est ce qui se passe avec votre code, néanmoins, la suggestion de @Rémi est la meilleure pour ce cas, en utilisant Align au lieu d'un Column .

Answer 4

Placer la vue de la grille dans le widget Flexible ou Expanded

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
);

Answer 5

N'utilisez pas Column pour l'alignement d'un seul enfant. Utilisez Align à la place.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )