🧩Align

Что такое Align

Align — это виджет в Flutter, который используется для выравнивания своего дочернего виджета внутри родительского контейнера. Он позволяет задавать положение виджета относительно его родительского контейнера с использованием параметров выравнивания. Это полезно, когда вам нужно разместить элементы в определенных местах, таких как центр, верхний левый угол, правый нижний угол и так далее.

Пример использования

В этом примере мы создадим интерфейс, в котором используется Align для выравнивания текста в различных частях экрана.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Align Example')),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.grey[300],
        child: const Column(
          children: [
            Align(
              alignment: Alignment.topLeft, // Пример: выравнивание в верхнем левом углу
              child: Text('Top Left'),
            ),
            Align(
              alignment: Alignment.topRight, // Пример: выравнивание в верхнем правом углу
              child: Text('Top Right'),
            ),
            Align(
              alignment: Alignment.center, // Пример: выравнивание по центру
              child: Text('Center'),
            ),
            Align(
              alignment: Alignment.bottomLeft, // Пример: выравнивание в нижнем левом углу
              child: Text('Bottom Left'),
            ),
            Align(
              alignment: Alignment.bottomRight, // Пример: выравнивание в нижнем правом углу
              child: Text('Bottom Right'),
            ),
          ],
        ),
      ),
    );
  }
}
             

Как работает код

1. Container — основной контейнер, который занимает всю ширину и высоту экрана, окрашен в светло-серый цвет.

2. Column — используется для вертикального расположения текстовых элементов.

3. Align — оборачивает текстовые элементы, позволяя управлять их выравниванием в родительском контейнере.

   • В первом Align текст выравнивается в верхнем левом углу (Alignment.topLeft).

   • Второй Align — в верхнем правом углу (Alignment.topRight).

   • Третий Align — по центру (Alignment.center).

   • Четвертый и пятый Align — в нижних углах.

Все настройки Align

1. alignment

   • Описание: Определяет положение дочернего виджета внутри родительского контейнера. Принимает значение типа Alignment, которое указывает, где будет располагаться дочерний элемент.

   • Пример:

     alignment: Alignment.center // Выравнивание по центру

   • Применение: Позволяет точно настраивать, где именно должен находиться дочерний элемент внутри контейнера.

2. child

   • Описание: Дочерний виджет, который будет размещен в соответствии с заданным выравниванием.

   • Пример:

     child: Text('Hello') // Текст, который будет выровнен

   • Применение: Позволяет указать, какой элемент вы хотите выравнивать.

Итог

Align — это полезный виджет, который помогает точно размещать элементы в пользовательском интерфейсе Flutter. С его помощью можно легко управлять положением дочерних виджетов, что позволяет создавать более структурированные и удобные интерфейсы.