[障害対応]WidgetをListView(children:[ に配置した場合の起動時エラー(RenderCustomMultiChildLayoutBox object was given an infinite size during layout.)について

1.発生事象

ListView以降にDropdownMenu()クラスを配置した後の動作テストで、以下の処理を実行直後に、以下のエラーが発生しました。

2.エラー内容

(エラー内容)1、3行目に注目して下さい
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.
The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#1ab67 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: index=2; layoutOffset=None (can use size)
    constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
    size: MISSING
    index: 2
    child: RenderRepaintBoundary#822b0 relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        needs compositing
        parentData: <none> (can use size)
        constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
        size: MISSING
        usefulness ratio: no metrics collected yet (never painted)
        child: RenderPhysicalModel#2bee6 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
            parentData: <none> (can use size)
            constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
            size: MISSING
            elevation: 0.0
            color: Color(0xfffef7ff)
            shadowColor: Color(0xfffef7ff)
            shape: BoxShape.rectangle
            borderRadius: BorderRadius.zero
            child: _RenderInkFeatures#406b7 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                parentData: <none> (can use size)
                constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
                size: MISSING
                child: RenderCustomMultiChildLayoutBox#72348 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                    parentData: <none> (can use size)
                    constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
                    size: Size(961.0, Infinity)
The constraints that applied to the RenderCustomMultiChildLayoutBox were: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
The exact size it was given was: Size(961.0, Infinity)
See https://flutter.dev/docs/development/ui/layout/box-constraints for more information.

The relevant error-causing widget was:
    Scaffold Scaffold:file:///C:/app/flutter/09_new/09/reorderblelistview_11/lib/screens/task_add_page.dart:206:12

When the exception was thrown, this was the stack:
#0      RenderBox.debugAssertDoesMeetConstraints.<anonymous closure> (package:flutter/src/rendering/box.dart:2467:9)

・・・(途中省略(同じようなログでした))・・・

#100    _drawFrame (dart:ui/hooks.dart:283:31)

The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#72348 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=961.0, 0.0<=h<=Infinity)
    size: Size(961.0, Infinity)
    child 1: RenderFlex#9c881 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body
        constraints: MISSING
        size: MISSING
        direction: vertical
        mainAxisAlignment: center
        mainAxisSize: max
        crossAxisAlignment: center
        verticalDirection: down
        child 1: RenderSemanticsAnnotations#8e7ec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
            parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
            constraints: MISSING
            size: MISSING
            child: RenderSemanticsAnnotations#eedee NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                parentData: <none>
                constraints: MISSING
                size: MISSING
                child: RenderMouseRegion#ea54f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
                    parentData: <none>
                    constraints: MISSING
                    size: MISSING
                    behavior: opaque
                    listeners: enter, exit
                    cursor: SystemMouseCursor(click)
    child 2: RenderConstrainedBox#1bf8b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
 
 ・・・(途中省略)・・・
                origin: null
                alignment: Alignment.center
                textDirection: ltr
                transformHitTests: true
════════════════════════════════════════════════════════════════════════════════

3.エラーの意味

この問題は、通常、ListView、Column、Row、またはその他の拡張性のあるウィジェットが適切な親ウィジェット内で制約されずに使用された場合に発生するらしいです。
(このエラーは、ListView の中で DropdownMenu が無限の高さを持つことを許されている状況でレンダリングしようとしたために発生している、という記載内容でした)
つまり、このような状況は、ListView(あるいは他のスクロール可能なウィジェット)がスクロール方向に対して無限の空間があると解釈されるため、子ウィジェットに高さの制約を与えないとエラーが発生する、ということだそうです。

4.修正内容

(障害発生時のコード)DropdownMenu()配置直後
    return Scaffold(
      appBar: AppBar(
        title: const Text('新規タスク追加'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: [
              const SizedBox(height: 20),
              // 追加)DropdownMenuクラスの移植
              DropdownMenu(dbProcess: dbProcess),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async{

(修正後)SizedBoxでクラスをラップしました
    return Scaffold(
      appBar: AppBar(
        title: const Text('新規タスク追加'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: [
              const SizedBox(height: 20),
              // 追加)DropdownMenuクラスの移植
              SizedBox(  // SizedBoxでラップして固定高さを設定する
                height: 300,
                child: DropdownMenu(dbProcess: dbProcess),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async{

以上で実行時エラーは解消しました。

コメントを残す