Search code examples
flutterflutter-layoutflutter-dependenciesflutter-animationflutter-test

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


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

enter image description here

but is becoming like this. enter image description here


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