Flutter Row Inside ListView

Question

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'),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

Just add the Expanded Widget. This will resolve your issue

Row(
  children: [
    Expanded(
      child: YourWidget(),
    ),
  ],
)

Answer 2

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'),
            ],
          ),
        ],
      ),
    );
  }

Answer 3

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,
          //     ),
          //   ],
          // ),
        ],
      ),
    );