Flutter Question posted in
The official Flutter documentation can be found here.

flutter center text inside button

I cannot work out why this text is not centering inside the button:

                  SizedBox(
                    width: 30,
                    height: 30,
                    child: ElevatedButton(
                      onPressed: () {
                        FavourDown();
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.black, // background color
                        elevation: 5,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20), // button's shape
                        ),
                      ),
                      child: const Text(
                        '-',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),

Result:

button

Tags:

2

Answers


  1. 0

    Elevated button is a fixed component, you can’t customise it to your own sizes. (You could just set padding to EdgeInsets.zero in style of elevated button)

    Better to use a Container and decoration to make your own button and Use the Centre() widget to centre the text in the container of your preference.

    Here is an example :

          InkWell(
          onTap: () {
            // Logic
          },
          child: Container(
            height: 20, // any size you want
            width: 100,// any size you want
            decoration: BoxDecoration(color: Colors.blue),
            child: Center(
              child: Text('Hello, World!'),
            ),
          ),
        ),

    Hope this helped

    Login or Signup to reply.
  2. 0

    Please use this code to center text.

                    SizedBox(
                width: 30,
                height: 30,
                child: ElevatedButton(
                  onPressed: () {
                    FavourDown();
                  },
                  style: ElevatedButton.styleFrom(
                        padding: EdgeInsets.zero,
                        alignment: Alignment.center,
                        backgroundColor: Colors.black, // background color
                        elevation: 5,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20), // button's shape
                        ),
                      ),
                      child: const Text(
                        '-',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search