how can i set the size of the child inside the row?-CodePudding

I want to make children use flexible sizes how can i set the size of the child inside the row? can you guys help me? and find the error constraint

anyone help me

 return SafeArea(
  child: Column(
    children: [
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            Container(
              color: Colors.lightBlue,
              child: Row(
                children: [
                  Expanded(
                    flex: 5,
                    child: Container(
                      color: Colors.green,
                    ),
                  ),
                  Expanded(
                    flex: 5,
                    child: Container(
                      color: Colors.blue,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      )
    ],
  ),
);

CodePudding user response：

To place children in a row you can use Flexible widget. The value of flex defines how much space each child should take. In the example that you provided.. Both children will be equally spaced since you gave flex value 5 for both.

return Scaffold(
      body: Center(
        child: SizedBox(
          height: 50,
          child: Row(
            children: [
              Flexible(
                  flex: 5,
                  child: Container(
                    color: Colors.red,
                  )),
              Flexible(
                  flex: 5,
                  child: Container(
                    color: Colors.green,
                  )),
            ],
          ),
        ),
      ),
    );

If you change the flex value to 1 and 5.. Now the total divisions will be 6 and out of that the first child will take 1 part and the second child will take 5 parts like below

return Scaffold(
      body: Center(
        child: SizedBox(
          height: 50,
          child: Row(
            children: [
              Flexible(
                  flex: 1,
                  child: Container(
                    color: Colors.red,
                  )),
              Flexible(
                  flex: 5,
                  child: Container(
                    color: Colors.green,
                  )),
            ],
          ),
        ),
      ),
    );

Also if you use a singleChildScrollView and an expanded inside that it then the expanded widget has no bounds so it will throw an error. So wrapping the Expanded with a SizedBox with a specific width will give you expected results.

EDIT

To have a SingleChildScrollView with dynamic content in the row you can do this

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: Row(
   mainAxisSize : MainAxisSize.min,
   children:[
     SizedBox(
       width: 100,//this is important since its a row and the row will take full width and throw an error.
       child: Image.asset(""),
     ),
     //Another SizedBox or Text or any widget.. 
   ]
 )
)