Centering a single character in Container using flutter

Question

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.

score 2 · Answer 1 · answered Mar 17 '22 at 15:50

The more better and optimal way will be by using the Material() widget and giving the size with SizedBox(). And later you can wrap your widget with Row() Column() etc.

SizedBox(
  height: 80,
  width: 80,
  child: Material(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(20),
    child: Center(
      child: Text(
        "+",
        style: TextStyle(
          fontSize: 50,
          color: Colors.black,
        ),
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

Yeah this looks great, I will definitely be trying it as soon as I have done some other minor tweaks to the code. — Gustav, Mar 17 '22 at 15:58

score 1 · Accepted Answer · answered Mar 17 '22 at 15:42

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

Oh okay perfect, guess I'll be switching to icon, I dont know why I didn't just do that in the first place. — Gustav, Mar 17 '22 at 15:49

Centering a single character in Container using flutter

2 Answers2