flutter problem: How to make button with centered text and right side Icon

Question

I want to make a button, In this button I want a text and icon both but text should be in center and icon will be right side.

this is code of button.

  bottomNavigationBar: Padding(
        padding:
            const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
        child: SizedBox(
          height: 45,
          width: MediaQuery.of(context).size.width,
          child: FlatButton(
            onPressed: () {
              _controller.nextPage(
                duration: const Duration(milliseconds: 200),
                curve: Curves.easeIn,
              );
              if(_currentPage + 1 == splashData.length){
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => HomePage()));
              }
              
            },
            child: Row(mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
    
                  "Next",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                  ),
                ),
                SizedBox(width: 50,),
                Padding(
                  padding: const EdgeInsets.only(right: 10),
                  child: Icon(Icons.arrow_forward,color: whiteColor,),
                )
              ],
            ),

            color: skyBlue,
          ),
        ),
      ),

I want like this button

but is becoming like this.

Answer 1

Try below code, used Opacity widget and set opacity:0

Note: Don't used FlatButton its depricated by Flutter used instead of ElevatedButton, TextButton

Refer here to new buttons

  ElevatedButton(
        onPressed: () {
          //write your onPressed function here
          print('Pressed');
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Opacity(
              opacity: 0,
              child: Icon(Icons.arrow_forward),
            ),
            Text('Next'),
            Icon(Icons.arrow_forward),
          ],
        ),
      ),

Your result screen->

Answer 2

You can use Stack instead of Row to achieve easily. Inside Stack you can use Positioned(right: 10, child: Icon()) also.

      Stack(
            alignment: Alignment.center,
            children: const [
              Text(

                'Next',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.white,
                ),
              ),
            Align(
              alignment: Alignment.centerRight,
              child: Icon(Icons.arrow_forward, color: Colors.white,),
            )
            ],
          )

We have more than two ways to achieve it. I have given two easiest option to achieve it.

Answer 3

You can use Expanded (and play with the flex property if needed). Also add an Align

For instance:

            Row(mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(),
                Expanded(
                  child: Text(
                    "Next",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                ),
                Expanded(
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 10),
                      child: Icon(Icons.arrow_forward,color: whiteColor),
                    ),
                  ),
                ),
              ],
            ),