In Flutter, how do I align one element of a Column to the left?

Question

I have a Container with some widgets in it. I don't want to give this Container a specific size, I just want it to wrap around the elements in it.

I know that you can use crossAxisAlignment on a Column to align its elements to the left, center or right, but I want to do this for only one specific element. I already tried using the Align widget, but then the Container width expands to the width of the screen which I don't want. I want the title and subtitle 1 to be centered, and I want subtitle 2 to be constrained to the left. How do I do this?

Here is my code:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;
    final textTheme = theme.textTheme;

    return Scaffold(
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(48),
          decoration: BoxDecoration(
            color: colorScheme.surface,
            borderRadius: BorderRadius.circular(2),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'This is the title text',
                style: textTheme.displayMedium,
              ),
              const SizedBox(height: 16),
              Text(
                'Subtitle 1',
                style: textTheme.bodyLarge,
              ),
              Text('Subtitle 2'),
            ],
          ),
        ),
      ),
    );
  }
}

score 0 · Accepted Answer · answered Jul 01 '23 at 14:11

This is a really hard task because your Container -> Column does not have immutable width, place subtitle 2 inside Align will make the width expands. But there is little information:

Because cannot use Align for subtitle 2 (because it could unconditionally expand widget's width), we must identify the WIDEST widget/text's size.
I think the WIDEST width belongs to title text.
So how can we get the width of title text widget?

And here we go, there's 2 solutions you can use:

To get the width of title widget, check out: How can I get the height of a widget?. For my point of view, this solution kinda complicated to use (not sure in your shoes :) ). If we can identify biggest width, so the rest jobs are super easy, right?
You can do a trick: Using Stack with 2 children: title (but change the color to transparent) and subtitle 2. This one would make your title & subtitle 2 display in a same area and subtitle 2 could align to left.

My code for trick:

child: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      'This is the title text',
      style: textTheme.headlineSmall,
    ),
    const SizedBox(height: 16),
    Text(
      'Subtitle 1',
      style: textTheme.bodyLarge,
    ),
    Stack(
      children: [
        Text(
          'This is the title text',
          style: textTheme.headlineSmall
              ?.copyWith(color: Colors.transparent),
        ),
        Text("Subtitle 2"),
      ],
    ),
    // Text("Subtitle 2"),
  ],
),

You should notice a small increase of height/padding for subtitle 2.

Result:

Kind of ridiculous that it is necessary to solve it in this way. It feels very hacky. In the end I changed my mind and I gave the container a specific width. — Donny Rozendal, Jul 10 '23 at 08:23

In Flutter, how do I align one element of a Column to the left?

1 Answers1