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{
以上で実行時エラーは解消しました。