Set max width for an element inside a row-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Container's

CodePudding user response：

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