Flutter layout: render two widgets side by side

Question

I'm trying to create a simple layout inserting 2 widgets in a same line, and I'm using a Row for this, but I'm getting these errors:

The following assertion was thrown during performLayout(): BoxConstraints forces an infinite width. These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the following function, which probably computed the invalid constraints in question: RenderConstrainedBox.performLayout The offending constraints were: BoxConstraints(w=Infinity, 50.0<=h<=Infinity)

But everything gets rendered as it should if I just render the widgets without using the Row widget.

class CardWithTitle extends StatelessWidget {
  const CardWithTitle({Key key, this.title, this.child}) : super(key: key);

  final String title;
  final child;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            children: [
              Text(title),
            ],
          ),
          Container(
            width: double.infinity,
            constraints: BoxConstraints(minHeight: 50),
            child: Card(
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: child,
              ),
            ),
          )
        ],
      ),
    );
  }
}

class SellsCard extends StatelessWidget {
  SellsCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: CardWithTitle(
        title: 'Sells',
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Total',
            ),
            Text(
              '\$ 96.500,54'
            ),
            Text(
              'Lorem ipsum dolor'
            )
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomePage> {
  String _username;
  String _title;
  String _usernameAbbr;

  @override
  Widget build(BuildContext context) {
    _username = 'James';
    _title = 'Some title';
    _usernameAbbr = _username[0].toUpperCase();

    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
        elevation: 0,
        actions: [
          Padding(
              padding: EdgeInsets.all(20.0),
              child: GestureDetector(
                onTap: () {},
                child: CircleAvatar(
                  backgroundColor: Theme.of(context).backgroundColor,
                  radius: 10.0,
                  child: FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Text(_usernameAbbr),
                  ),
                ),
              ))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SellsCard(), // <-- this is working
            SellsCard(), // <-- this is working
            Row(children: [SellsCard(), SellsCard()]) // <-- This is throwing the errors
          ],
        ),
      ),
    );
  }
}

This is the layout structure I'm trying to create:

Any insights about what I'm doing wrong or how I can get these two items in the same line would awesome.

I believe this was already answered here: [link](https://stackoverflow.com/questions/52442724/boxconstraints-forces-an-infinite-width) — Eduardo, Nov 08 '20 at 23:17

score 5 · Accepted Answer · answered Nov 08 '20 at 23:01

5

Wrap your Row's children with Expanded() :

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

answered Nov 08 '20 at 23:01

Will Hlas

1,241
1
6
14

Thank you, that worked. Would you please elaborate on why is it necessary to wrap the widget with an Expanded widget? – darksoulsong Nov 09 '20 at 14:50

Flutter layout: render two widgets side by side

1 Answers1