🧩Expanded

Что такое Expanded

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Expanded Example')),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.red,
            ),
          ),
          
          Expanded(
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

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

1. Scaffold — это основа для нашего интерфейса, как холст для художника.

2. AppBar — это верхняя панель, где написано название приложения.

3. Column — используется для размещения виджетов вертикально, один под другим, как книги на полке.

4. Expanded — оборачивает каждый контейнер, позволяя им занимать равные части доступного пространства в колонне.

5. Container — каждый контейнер окрашен в свой цвет (красный, зелёный, синий) и занимает равную высоту, благодаря Expanded.

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

1. child

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

   • Пример:

     child: Container(color: Colors.red) // Контейнер, который будет растягиваться

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

2. flex

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

   • Пример:

     flex: 2 // Этот виджет займет в два раза больше пространства по сравнению с другими

   • Применение: Используется, если вы хотите контролировать, как именно будет делиться пространство между несколькими Expanded.

Итог

Expanded — это полезный виджет, который помогает вашим элементам занимать всё доступное пространство в контейнере. Если вам нужно, чтобы виджеты равномерно распределялись по размеру или занимали определённую часть пространства, используйте Expanded, и он сделает это за вас.