I have a problem with displaying in a Row in flutter-CodePudding

I'm a beginner in flutter, I want to display a text on the far left and a button on the far right in a container, here is my code:

Container(
                width: double.infinity,
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.all(8.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('TEXT'),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.price_change_outlined,
                          color: Colors.blue,
                        ))
                  ],
                ),
              ),

CodePudding user response：

MainAxisAlignment.spacebetween

CodePudding user response：

Use mainAxisAlignment: MainAxisAlignment.spaceBetween,

 child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('TEXT'),
          IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.price_change_outlined,
                color: Colors.blue,
              ))
        ],
      ),

You can find more about Row and layout

CodePudding user response：

An alternative to the above solutions is to use a Spacer widget.

An advantage to this approach is that you can easily add more widgets to whatever side you want and keep the spacing in between.

Row(
    children: [
       Text('TEXT'),
       const Spacer(),
       IconButton(
         onPressed: () {},
         icon: Icon(
           Icons.price_change_outlined,
           color: Colors.blue,
         ),
       )
   ]
)