CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-textflutter-container
Ankan Sharma
Ankan Sharma

Reputation: 61

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

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 enter image description here

This is the desired outcome enter image description here

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

Upvotes: 0

Views: 1585

Answers (6)

Prashant
Prashant

Reputation: 676

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" enter image description here

name : "ButtonButtonButton" enter image description here

Upvotes: 1

Armstrong Lohãns
Armstrong Lohãns

Reputation: 61

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

Upvotes: 1

Rahul Pandey
Rahul Pandey

Reputation: 570

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

Upvotes: 4

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

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-> image

Upvotes: 1

Nazarudin
Nazarudin

Reputation: 1067

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:
working code

Upvotes: 1

omar hatem
omar hatem

Reputation: 1989

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

Upvotes: 1

Related Questions