I'm trying to create a chat screen, everything works as fine, until I add a message into my message list and it has to be displayed on the screen. Then the app crashes with the following error:
RenderObject: RenderFlex#83717 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=430.0, 0.0<=h<=Infinity)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
child 1: _RenderScrollSemantics#4f646 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
constraints: MISSING
semantic boundary
size: MISSING
child: RenderPointerListener#8b994 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: deferToChild
listeners: signal
child: RenderSemanticsGestureHandler#12b20 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: opaque
gestures: <none>
child: RenderPointerListener#29265 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: opaque
listeners: down, panZoomStart
child 2: RenderConstrainedBox#5dfd5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=1.0)
child: RenderPositionedBox#eb861 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
alignment: Alignment.center
textDirection: ltr
widthFactor: expand
heightFactor: expand
child: RenderPadding#848c3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
padding: EdgeInsets.zero
textDirection: ltr
child: RenderConstrainedBox#18c35 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=1.0)
child 3: RenderConstrainedBox#61201 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(w=430.0, 0.0<=h<=Infinity)
child: RenderMouseRegion#90872 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: opaque
listeners: enter, exit
cursor: SystemMouseCursor(text)
child: RenderTapRegion#245fa NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: deferToChild
groupId: EditableText
child: RenderIgnorePointer#c2f01 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
ignoring: false
ignoringSemantics: null
child 4: RenderConstrainedBox#0eb83 NEEDS-LAYOUT NEEDS-PAINT
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=18.6)
════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderFlex#83717 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1972 pos 12: 'hasSize'
Here is my Widget build:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Chat',
style: TextStyle(
fontFamily: 'Chalet',
fontWeight: FontWeight.w300,
fontSize: widget.deviceWidth * 0.06),
),
),
backgroundColor: whitePrimary,
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _messages.length,
itemBuilder: (BuildContext context, int index) {
return ListView(
children: [Text(_messages[index])],
);
}),
),
const Divider(height: 1.0),
_buildTextComposer(),
SizedBox(
height: widget.deviceHeight * 0.02,
)
],
),
);
}
Widget _buildTextComposer() {
return SizedBox(
width: widget.deviceWidth,
child: TextField(
autofocus: true,
controller: _textFieldController,
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
filled: true,
fillColor: whitePrimary,
suffixIcon: IconButton(
icon: const Icon(Icons.send_rounded, color: orangePrimary),
onPressed: () {
_sendMessage(_textFieldController.text);
},
),
hintStyle: TextStyle(fontSize: widget.deviceWidth * 0.03),
hintText: 'Write a message...',
),
),
);
}
ok, there are nested ListViews, your entire design is mainly a list view that contains other list views (messages) inside it.
in that case the message listview (inner list view) must have shrikWrap : true and physics: NeverScrollableScrollPhysics() .