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

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

CodePudding user response：

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

CodePudding user response：

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:

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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"