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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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),
                    ),
                  ),
                ),
              ],
            ),