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

Issue

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.

Solution

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->

Answered By – Ravindra S. Patil

Answer Checked By – Marie Seifert (FlutterFixes Admin)