Centering a single character in Container using flutter

March 17, 2022

I am trying to create an add-button, where the icon inside is just a simple ‘+’-character, but for some reason it just sits at the bottom of the container instead of in the center

Troubling text in a container

This is the structure if needed, where I have my Text widget inside a Center widget, and also the textAlign set to TextAlign.center.

Underneath I have provided all the code leading up to the Text widget

Column(
children: [
  ...,
  Expanded(
    child: Row(
      children: [
        Container(
          width: 80,
          alignment: Alignment.topCenter,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                child: Container(
                  width: 60,
                  height: 60,
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.all(Radius.circular(24))
                  ),
                  child: const Center(
                    child: Text("+",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 70,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        ...,
      ],
    ),
  )
],);

Note this is my first time using flutter.

>Solution :

So your font size is too big, and your box is too small to show that the "+" is in the centre of the box.

But it’s in the centre, if you use this values for your second container you’ll see it is in the center.

Column(
children: [
  ...,
  Expanded(
    child: Row(
      children: [
        Container(
          width: 80,
          alignment: Alignment.topCenter,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.all(Radius.circular(24))
                  ),
                  child: const Center(
                    child: Text("+",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 70,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        ...,
      ],
    ),
  )
],);

So to do this use an icon and you’ll have a better presentation you can see example here

Row(
        children: [
          Container(
            width: 80,
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: const BoxDecoration(
                        color: Colors.amber,
                        borderRadius: BorderRadius.all(Radius.circular(24))),
                    child: const Center(
                      child: Icon(Icons.add, size: 35,)
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),