Row mainAxisAlignment not working with FittedBox

user_15754411 0
Viewed 532

Row mainAxisAlignment is not working after wrapping with FittedBox Please explain me why this is happening.

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: 20,
          child: FittedBox(
            fit: BoxFit.fill,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('THis is the thing'),
                Text('THis is another thing'),
              ],
            ),
          ),
        )
    );
  }

Expected

enter image description here

Output

enter image description here

flutter-layout dart flutter
2 Answers

If you really want to use Row inside FittedBox with effect of mainAxisAllignment.spaceBetween or any, you have to manually set spaceBetween using SizedBox with width as per spacing. Also set fit property to BoxFit.fitHeight .

Container(
          height: 20,
            child: FittedBox(
              alignment: Alignment.center,
              fit: BoxFit.fitHeight,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('THis is the thing',style: TextStyle(fontSize: 20),),
                  SizedBox(width: 300,),
                  Text('THis is another thing',style: TextStyle(fontSize: 20,),),
                ],
              ),
            ),
        )

Note: Set allignment property to specify positioning. for MainAxisAllignment.start and MainAxisAllignment.start. Eg: Alignment.topLeft to get MainAxisAllignment.start effect.

user_141142790

To answer your question,

Row mainAxisAlignment is not working after wrapping with FittedBox Please explain me why this is happening.

Container always fills the entire width of the screen size. If it has child, then it will wraps up itself to match the width of its child.

Another interesting widget FittedBox will fits its children based on the size of the children within itself by scaling based on available space.

Solution

To achieve the expected result, you can force set the width of Container widget to double.infinity

enter image description here

Snippet

body: Container(
          height: 20,
          width: double.infinity,
          child: FittedBox(
            fit: BoxFit.fill,
            alignment: Alignment.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [Text('THis is the ROW'), Text('THis is another  ')],
            ),
          ),
        )

NOTE : If texts are small it will be enlarged to occupy the rest of the space because it is inside the FittedBox and vice-versa.

user_34225560
Related