I'm trying to make the first element inside the row to be responsive, but with max width of 500. The result is the first element size is always 500.

home: Scaffold(
    body: Row(
      children: [
        Container(
          constraints: const BoxConstraints(maxWidth: 500),
          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
        SizedBox(
          width: 600,
          child: Container(color: Colors.green),
        )
      ],
    ),
  ),

enter image description here


Solution 1: Yeasin Sheikh

Container's constraints apply to the child,

Additional constraints to apply to the child.

While there is no child in your Container, you are having this behavior. Add a child on Container.

You can check more about UI constraints.

Update:

I prefer using LayoutBuilder to handle responsiveness.

 Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Row(
          children: [
            Container(
              constraints: BoxConstraints(
                maxWidth:
                    constraints.maxWidth >= 500 ? 500 : constraints.maxWidth,
              ),
              child: Wrap(
                children: [
                  ...List.generate(
                    55,
                    (index) => Text("conta sner"),
                  )
                ],
              ),
              color: Colors.red,
            ),
            Expanded(child: Container(color: Colors.green))
          ],
        ),
      ),
    );

enter image description here


Solution 2: Tasnuva Tavasum oshin

home: Scaffold(
body:Container(
width: double.infinity,
child: Row(
children: [
Container(constraints: const BoxConstraints(maxWidth: 500), color: Colors.red),
Expanded(child: Container(color: Colors.green))
],
),)
),


Solution 3: Saddan

Just notice flex value first row Item flex value is 6 which means it will take 60% of available space, and second one has 4 which means second one will take 40% of available space

home: Scaffold(
  body: Row(
    children: [
      Expanded(
        flex: 6,
        child: Container(

          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
      ),
      Expanded(
        flex : 4,
        child: Container(color: Colors.green),
      )
    ],
  ),
);