How to center Text widget vertically inside a container of fixed height in Flutter

Question

I want to center a Text Widget vertically inside a container with a fixed height. But, I want to keep the width of the container dynamic which will change according to the length of the Text. I tried using the Center and Align over the Text widget and the parent container widget, but it expanded along the whole width. Point to be noted Container is residing inside another Column.

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Text(
        name,
        style: textStyle,
      ),
    );
  }
}

This is the actual outcome

This is the desired outcome

I don't want to use vertical padding to center the Text

One update, all the replies use a column inside the container and then center it. Is there any other way where I don't want to use any extra widget? Just by using container and Text, we can achieve this. If not there, I will go with the Column inside the container. — Ankan Sharma, May 19 '22 at 05:08

score 4 · Answer 1 · answered May 19 '22 at 05:03

You can try this below code easy and simple

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.2,
          decoration: BoxDecoration(
            color: Color(0xFFE2D9FB),
            borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                name,
                textAlign: TextAlign.center,
                style: textStyle,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

score 1 · Answer 2 · answered May 19 '22 at 04:47

you can wrap you text in a Column that will take the whole container size then you can use mainAxisAlignment to center it

child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        name,
        style: textStyle,
      ),
    ],
  ),

score 1 · Answer 3 · answered May 19 '22 at 04:52

you can wrap your Text widget inside Column then set mainAxisAlignment to center, like this:

child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            name,
            style: textStyle,
          ),
        ],
      ),

for working example see: https://dartpad.dev/?id=e66e420f2f0201c772f73819711bf290

check this screenshot:

score 1 · Answer 4 · answered May 19 '22 at 04:56

Try below code and set alignment: Alignment.center, to your container.

Container(
      alignment: Alignment.center,
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius: const BorderRadius.all(Radius.circular(15)),
      ),
      child:  Text(
          'Button',
          style: TextStyle(),
          
      ),
    );

Other Way using Column

Container(
  alignment: Alignment.center,
  height: MediaQuery.of(context).size.height * 0.2,
  decoration: BoxDecoration(
    color: Color(0xFFE2D9FB),
    borderRadius: const BorderRadius.all(Radius.circular(15)),
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Button',
        style: TextStyle(),
      ),
    ],
  ),
);

Refer layout

Result Screen->

score 1 · Answer 5 · answered May 19 '22 at 05:17

You should put an column with the parameter "mainAxisAlignment: MainAxisAlignment.center", who will put all widgets centered... Like this:

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            name,
            style: textStyle,
          ),
        ],
      ),
    );
  }
}

score 1 · Answer 6 · answered May 19 '22 at 05:41

Try this:

return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width * name.length/50,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Center(
        child: Text(
          name,
          style: textStyle,
        ),
      ),
    );

name : "Button"

name : "ButtonButtonButton"

How to center Text widget vertically inside a container of fixed height in Flutter

6 Answers6