Question 74860 in Flutter Question posted in
The official Flutter documentation can be found here.

How to align text to the center – Flutter

I want to align the text to the center but it doesn’t change, I do not know where the problem is. I use Flex to handle responsive screen, so it must be something to do with it in order to align the text.

enter image description here
enter image description here

My current code is display ui like in left, while the code is supposed to display ui like picture in right

final isBelowExtraScreen = MediaQuery.of(context).size.width <= 1024;

Container(
      height: isBelowExtraLargeScreen ? 230 : 100,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: ColorName.successVariant.withOpacity(0.3),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Flex(
        direction: isBelowExtraLargeScreen ? Axis.vertical : Axis.horizontal,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: isBelowExtraLargeScreen
            ? CrossAxisAlignment.center
            : CrossAxisAlignment.start,
        children: [
          Flex(
            direction:
                isBelowExtraLargeScreen ? Axis.vertical : Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: isBelowExtraLargeScreen
                ? CrossAxisAlignment.center
                : CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: ColorName.success,
                ),
                width: 40,
                height: 40,
                padding: const EdgeInsets.all(5),
                child: Assets.icons.checklist.svg(color: ColorName.white),
              ),
              const SizedBox(width: 16),
              Column(
                children: [
                  Text(
                    'All queues have been handled.',
                    style: heading5Bold(),
                  ),
                  Text(
                    isBelowExtraLargeScreen
                        ? ''
                        : 'All food have been delivered. Solved queue right now.',
                    style: body1(color: ColorName.textSecondary),
                  ),
                ],
              ),
            ],
          ),
          CustomOutlineButtonWidget(
            width: 168,
            height: 48,
            onPressed: () {}
            label: 'Handled queue',
            labelStyle: heading5SemiBold(),
          )
        ],
      ),
    );
Tags:

4

Answers


  1. 0

    I’m trying to Solve your Problem :

    Container(
        height: isBelowExtraLargeScreen ? 230 : 100,
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: ColorName.successVariant.withOpacity(0.3),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Flex(
          direction: isBelowExtraLargeScreen ? Axis.vertical : Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: isBelowExtraLargeScreen
              ? CrossAxisAlignment.center
              : CrossAxisAlignment.start,
          children: [
            Flex(
              direction:
              isBelowExtraLargeScreen ? Axis.vertical : Axis.horizontal,
    
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: ColorName.success,
                  ),
                  width: 40,
                  height: 40,
                  padding: const EdgeInsets.all(5),
                  child: Assets.icons.checklist.svg(color: ColorName.white),
                ),
                const SizedBox(width: 16),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'All queues have been handled.',
                      style: heading5Bold(),
                    ),
                    Text(
                      isBelowExtraLargeScreen
                          ? ''
                          : 'All food have been delivered. Solved queue right now.',
                      style: body1(color: ColorName.textSecondary),
                    ),
                  ],
                ),
              ],
            ),
            CustomOutlineButtonWidget(
              width: 168,
              height: 48,
              onPressed: () {}
              label: 'Handled queue',
              labelStyle: heading5SemiBold(),
            )
          ],
        ),
      ),

    You Just need to Add This Inside Flex Widget

    mainAxisAlignment: MainAxisAlignment.center,

    crossAxisAlignment: CrossAxisAlignment.center,

    Login or Signup to reply.
  2. 0

    use mainAxisAlignment and crossAxisAlignment and set both of them to center

    Login or Signup to reply.
  3. 0

    Another Example how to Align Text in Center Using Flex :

    Flex(
            direction: Axis.vertical,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(),
              ),
              Expanded(
                flex: 2,
                child: Text(
                  'Hello, World!',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(),
              ),
            ],
          ),
        ),
      ),
    Login or Signup to reply.
  4. 0

    You Can Use Align To Make Text Center

    Align(
              alignment: Alignment.center,
              child: Text('hkahsja'),
            )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search