I am trying to add a Row inside of a list view and am getting the error
I/flutter (13858): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (13858): The following assertion was thrown during performLayout():
I/flutter (13858): BoxConstraints forces an infinite height.
I/flutter (13858): These invalid constraints were provided to RenderParagraph's layout() function by the following
I/flutter (13858): function, which probably computed the invalid constraints in question:
I/flutter (13858): RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:805:17)
I/flutter (13858): The offending constraints were:
I/flutter (13858): BoxConstraints(w=72.0, h=Infinity)
Following the guidance found for that error, I have tried wrapping my ListView in an Expanded, but that only leads to Expanded widgets must be placed inside Flex widgets., which leads me to trying another approach.... and ending up back with this same error.
My widget is below. Is there a way to get this working? What I am ultimately trying to do is show multiple sets of rows with some text between between them, allowing for the user to scroll the page up and down.
class _RoutineEditState extends State<RoutineEdit> {
String routineName;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Edit Routine'),
),
body: ListView(
//padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
children: <Widget>[
Text('ddedede'),
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Set'),
],
),
],
),
);
}
}
2 Answers
As I am not aware of your desired layout.
Just to fix the error. we have three options.
First: use - IntrinsicHeight widget.
code:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Edit Routine'),
),
body: ListView(
//shrinkWrap: true,
//padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
children: <Widget>[
Text('ddedede'),
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Set'),
Text('Set'),
Text('Set'),
],
),
),
],
),
);
}
Second: wrap your row in LimitedBox and keep - crossAxisAlignment: CrossAxisAlignment.stretch
code:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Edit Routine'),
),
body: ListView(
shrinkWrap: true,
//padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
children: <Widget>[
Text('ddedede'),
LimitedBox(
maxHeight: 200.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Set'),
Text('Set'),
Text('Set'),
],
),
),
],
),
);
}
Third: remove or comment - crossAxisAlignment: CrossAxisAlignment.stretch
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Edit Routine'),
),
body: ListView(
shrinkWrap: true,
//padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
children: <Widget>[
Text('ddedede'),
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Set'),
Text('Set'),
Text('Set'),
],
),
],
),
);
}
Expanded widget must be the child of Row or Column widgets, but you have used it directly in body property. Try to remove the first Expanded widget.
Scaffold(
appBar: AppBar(
title: Text('Edit Routine'),
),
body: ListView(
//padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
children: <Widget>[
Text('ddedede'),
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
flex: 1,
child: Text('Set'),
fit: FlexFit.tight,
),
Flexible(
flex: 1,
child: Text('Reps'),
fit: FlexFit.tight,
),
Flexible(
flex: 1,
child: Text('lbs'),
fit: FlexFit.tight,
),
Flexible(
flex: 1,
child: Text('prev'),
fit: FlexFit.tight,
),
Flexible(
flex: 1,
child: Text('...'),
fit: FlexFit.tight,
),
],
),
// Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: <Widget>[
// SizedBox(
// height: 24,
// ),
// TextField(
// controller: TextEditingController(text: routineName),
// keyboardType: TextInputType.text,
// decoration: kTextFieldDecoration.copyWith(hintText: 'Name of routine')),
// SizedBox(
// height: 24,
// ),
// ],
// ),
],
),
);
