Flutter wrap does not as child of row

Question

I have one Row with two children. The first is a Wrap and the second is another Row like so:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetweeen,
  children: [
    Wrap(<two children in here>),
    Row(<2 or 3 children in here>)
]

I expected, when the screen is smaller, that the children of Wrap would stack on top of each other on the left and the children of Row would stay in a Row on the right.

What actually happens is the child Row overflows to the right, and the Wrap children never stack on top of each other.

The goal is to avoid the overflow, but not to 'break' the child Row. The Wrap child is what I want to 'break' when size of the window is too small to have both Wrap and child Row in the parent Row.

PS - this is for web, not mobile. I don't think it matters.

Answer 1

I wrapped the Wrap() child in Expanded() like Kirill Bubochkin suggested. Wrapping the Wrap() child in Flexible() also has the same effect.

Answer 2

You may achieve this by embedding your child Row in an IntrinsicWidth Widget.

In this example, I also embedded the parent Row in an IntrinsicHeight Widget to have the child Row children stretching to match the Wrap.

Full source code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Flexible(
              child: Wrap(
                children: [
                  Card(
                    child: Container(
                      color: Colors.blue.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text 1'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.blue.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text 2'),
                    ),
                  ),
                ],
              ),
            ),
            IntrinsicWidth(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text A'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text B'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text C'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

Wrap you Wrap widget into Expanded:

Row(
  children: [
    Expanded(
      child: Wrap(
        spacing: 20,
        runSpacing: 20,
        children: [
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
        ],
      ),
    ),
    Row(
      children: [
        Container(width: 100, height: 50, color: Colors.red),
        SizedBox(width: 30),
        Container(width: 100, height: 50, color: Colors.red),
      ],
    ),
  ],
)