Flutter : La RenderBox n'était pas disposée

Question

J'essaie de créer un ListView mais lorsque j'importe la classe list_form.dart j'obtiens cette erreur. Peut-être que j'ai fait quelques erreurs avec la mise en page parce que si j'essaie de l'exécuter dans le fichier principal, je n'obtiens pas cette erreur.

Voici l'erreur :

    I/flutter (12956):  EXCEPTION CAUGHT BY RENDERING LIBRARY 
I/flutter (12956): The following assertion was thrown during performResize():
I/flutter (12956): Vertical viewport was given unbounded height.
I/flutter (12956): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (12956): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (12956): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (12956): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (12956): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (12956): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (12956): the height of the viewport to the sum of the heights of its children.
I/flutter (12956):
I/flutter (12956): When the exception was thrown, this was the stack:
I/flutter (12956): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1133:15)
I/flutter (12956): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1186:6)
I/flutter (12956): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1616:9)
I/flutter (12956): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #5      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #7      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #9      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #19     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (12956): #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #21     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (12956): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #23     RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13)
I/flutter (12956): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #25     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11)
I/flutter (12956): #26     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter (12956): #27     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7)
I/flutter (12956): #28     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14)
I/flutter (12956): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #32     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #33     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1192:11)
I/flutter (12956): #34     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #36     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #37     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #38     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1192:11)
I/flutter (12956): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/fltter (12956): #52     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #53     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #54     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #55     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2884:13)
I/flutter (12956): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #57     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15)
I/flutter (12956): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #59     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #60     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #61     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #62     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #63     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #64     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #65     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #66     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #67     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #68     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #69     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #70     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #71     RenderView.performLayout (package:flutter/src/rendering/view.dart:147:13)
I/flutter (12956): #72     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1506:7)
I/flutter (12956): #73     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18)
I/flutter (12956): #74     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19)
I/flutter (12956): #75     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:674:13)
I/flutter (12956): #76     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
I/flutter (12956): #77     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (12956): #78     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (12956): #79     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7)
I/flutter (12956): #81     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
I/flutter (12956): #82     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
I/flutter (12956): #83     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
I/flutter (12956): (elided one frame from package dart:async)
I/flutter (12956):
I/flutter (12956): The following RenderObject was being processed when the exception was fired:
I/flutter (12956):   RenderViewport#925a8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956):   creator: Viewport  _ScrollableScope  IgnorePointer-[GlobalKey#8e8f7]  Semantics  Listener 
I/flutter (12956):   _GestureSemantics  RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#67ae5] 
I/flutter (12956):   _ScrollSemantics-[GlobalKey#17eb8]  RepaintBoundary  CustomPaint  RepaintBoundary 
I/flutter (12956):   NotificationListener<ScrollNotification>  
I/flutter (12956):   parentData: <none> (can use size)
I/flutter (12956):   constraints: BoxConstraints(unconstrained)
I/flutter (12956):   size: MISSING
I/flutter (12956):   axisDirection: down
I/flutter (12956):   crossAxisDirection: right
I/flutter (12956):   offset: ScrollPositionWithSingleContext#c4917(offset: 0.0, range: null..null, viewport: null,
I/flutter (12956):   ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#2fecf,
I/flutter (12956):   ScrollDirection.idle)
I/flutter (12956):   anchor: 0.0
I/flutter (12956): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (12956):   RenderSliverPadding#74d62 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956):     RenderSliverList#5c56d NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956): 
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderViewport#925a8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderViewport#925a8 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#8bbda relayoutBoundary=up11 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#209b4 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#a9641 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#9f5b4 relayoutBoundary=up8 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#47944 relayoutBoundary=up7 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#e17a8 relayoutBoundary=up6 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#a2328 relayoutBoundary=up5 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#02607 relayoutBoundary=up4 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderFlex#79164 relayoutBoundary=up3 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true.
I/flutter (12956): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

C'est la classe list_form.dart :

import 'package:flutter/material.dart';

class ListForm extends StatefulWidget {
  @override
  ListFormState createState() => new ListFormState();
}

class ListFormState extends State<ListForm> {
    List<Sting> products = ["Test1", "Test2", "Test3"];
    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Center(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (BuildContext ctxt, int index) {
                      return new Text(products[index]);
                    }
                  ),
                  new IconButton(
                    icon: Icon(Icons.remove_circle),
                    onPressed: () { },
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
              new TextField(
                decoration: new InputDecoration(
                  hintText: "Prodotto"
                ),
                onSubmitted: (String str) {
                  setState(() {
                    products.add(str);
                  });
                },
              ),
            ]
          )
        )
      );
    }
}

C'est la classe app_base.dart :

import 'package:flutter/material.dart';
import '../UI/list_form.dart';

class AppBase extends StatefulWidget {
  @override
  State createState() => new AppBaseState();
}

class AppBaseState extends State<AppBase> {
  bool _pressed = true;

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.greenAccent,
      child: new Scaffold(
        body:
          new ListForm(),
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Skeeper'),
          backgroundColor: Colors.green,
        ),
        floatingActionButton: FloatingActionButton(
          tooltip: 'Test',
          child: new Icon(Icons.add),
          backgroundColor: Colors.green,
          onPressed: () {
              setState(() {
                _pressed = !_pressed;
              });
          },
        ),
      )
    );
  }
}

Ne vous inquiétez pas s'il y a du code inutilisé, c'est un travail en cours et cette erreur m'a juste empêché de continuer ce que je faisais.

Answer 1

Le problème est que vous placez le ListView à l'intérieur d'une colonne/ligne. Le texte de l'exception donne une bonne explication de l'erreur.

Pour éviter cette erreur, vous devez fournir une taille à l'option ListView à l'intérieur.

Je vous propose ce code qui utilise un Expanded pour informer de la taille horizontale (maximum disponible) et de la taille de l'écran. SizedBox (Il pourrait s'agir d'un conteneur) pour l'élément height:

    new Row(
      children: <Widget>[
        Expanded(
          child: SizedBox(
            height: 200.0,
            child: new ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: products.length,
              itemBuilder: (BuildContext ctxt, int index) {
                return new Text(products[index]);
              },
            ),
          ),
        ),
        new IconButton(
          icon: Icon(Icons.remove_circle),
          onPressed: () {},
        ),
      ],
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
    )

,

Answer 2

Vous pouvez ajouter un code comme celui-ci

ListView.builder{
   shrinkWrap: true,
}

Answer 3

Raison de l'erreur :

Column tente de s'étendre sur l'axe vertical, et il en va de même pour la ListView donc vous devez contraindre la hauteur de ListView .

---

Solutions

1. Utilisez soit Expanded ou Flexible si vous voulez permettre ListView pour occuper tout l'espace gauche dans Column .

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

---

2. Utilisez SizedBox si vous souhaitez restreindre la taille des ListView à une certaine hauteur.

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )

---

3. Utilisez shrinkWrap si votre ListView n'est pas trop grande.

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

Answer 4

Placer votre vue de liste dans un widget flexible peut également être utile,

Flexible( fit: FlexFit.tight, child: _buildYourListWidget(..),)

Answer 5

J'ai utilisé ce code pour résoudre le problème de l'affichage des éléments dans la liste horizontale.

new Container(
      height: 20,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: array.length,
            itemBuilder: (context, index){
              return array[index];
            },
          ),
        ],
      ),
    );