Centering a single character in Container using flutter-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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