Flutter: Row is stepping a line inside a Wrap

Question

suppose we have:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Row(
          children: [
            Text('a'),
          ],
        ),
        Row(
          children: [
            Text('b'),
          ],
        ),
      ],
    );
  }
}

the output of this would be:

notice how each of the Row's is taking a whole line

how can I fix this and make them side by side?

Answer 1

you should wrap your Row's with FittedBox, which will make them only consume the space they need, so your code should be like this:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        FittedBox(
          child: Row(
            children: [
              Text('a'),
            ],
          ),
        ),
        FittedBox(
          child: Row(
            children: [
              Text('b'),
            ],
          ),
        ),
      ],
    );
  }
}

and your output will be like this: