Column на всю ширину экрана во Flutter

Небольшая шпаргалка о том как сделать колонку во Флаттер на всю ширину экрана.

Например я хочу сверстать страницу на которой есть текст и 3 кнопки, все это должно располагаться по центру экрана. На даже если указать

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

содержимое не будет находится по центру из-за того, что колонка не растягивается на всю ширину экрана:

Вот код колонки:

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(userLoginStatus),
            const SizedBox(height: 20.0,),
            ElevatedButton(onPressed: null, child: Text('Sign up')),
            const SizedBox(height: 20.0,),
            ElevatedButton(onPressed: null, child: Text('Sign in')),
            const SizedBox(height: 20.0,),
            ElevatedButton(onPressed: null, child: Text('Sign out')),
          ],
        )

Чтобы колонка занимала всю ширину экрана или родительского контейнера, нужно обернуть её в виджет Expanded или SizedBox.expand в зависимости от контекста. Вот несколько подходов:

Использование Expanded (в составе Column или Row)

Если ваша колонка является дочерним элементом другого Column, Row или Flex, используйте Expanded:

Column(
  children: [
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
		crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(userLoginStatus),
          SizedBox(height: 20.0),
          ElevatedButton(onPressed: null, child: Text('data')),
        ],
      ),
    ),
  ],
)

Использование SizedBox.expand

Если вы хотите, чтобы колонка заняла всю ширину и высоту (или только ширину):

SizedBox.expand(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text(userLoginStatus),
      SizedBox(height: 20.0),
      ElevatedButton(onPressed: null, child: Text('data')),
    ],
  ),
)

Это как раз то, что нужно:

Использование width с Container

Если нужно задать только ширину, можно обернуть колонку в Container и указать ширину через double.infinity:

Container(
  width: double.infinity, // Занимает всю ширину экрана
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text(userLoginStatus),
      SizedBox(height: 20.0),
      ElevatedButton(onPressed: null, child: Text('data')),
    ],
  ),
)

Использование Align с шириной

Для случаев, когда колонка должна быть внутри ограниченного пространства, можно обернуть её в Align и задать ширину вручную:

Align(
  alignment: Alignment.center, // Центрирование колонки
  child: SizedBox(
    width: double.infinity, // Задаёт ширину по всей доступной площади
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
	  crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(userLoginStatus),
        SizedBox(height: 20.0),
        ElevatedButton(onPressed: null, child: Text('data')),
      ],
    ),
  ),
)

Какой подход выбрать?

Expanded — если колонка является дочерним элементом внутри Column или Row.
SizedBox.expand — если вам нужно занять всё доступное пространство.
Container с width: double.infinity — если вы хотите только задать ширину.

Выбор зависит от вашего общего макета.

шпаргалка