# SizedBox

#### Что такое `SizedBox`

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

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

В этом примере мы создаем интерфейс, в котором используются несколько `SizedBox` для управления расстоянием между текстовыми элементами.

<div align="left"><figure><img src="https://i.postimg.cc/CKBsj6tc/sizedbox.png" alt="" width="188"><figcaption><p>SizedBox - создает пустоту между виджетами</p></figcaption></figure></div>

```dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SizedBox Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('First Line'),
            const SizedBox(height: 20), // Пример: вертикальный отступ 20 пикселей
            const Text('Second Line'),
            const SizedBox(width: 50), // Пример: горизонтальный отступ 50 пикселей (для контейнера)
            Container(
              color: Colors.blue,
              width: 100,
              height: 100,
              child: const Center(child: Text('Box', style: TextStyle(color: Colors.white))),
            ),
            const SizedBox(height: 20), // Еще один вертикальный отступ
            const Text('Third Line'),
          ],
        ),
      ),
    );
  }
}
```

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

1. **Column** — используется для вертикального расположения текстовых элементов. Каждый элемент будет располагаться один под другим.
2. **SizedBox** — добавлен между текстами для создания пространства. В первом `SizedBox` задана высота в 20 пикселей, а во втором — ширина в 50 пикселей. Это обеспечивает расстояние между строками текста.
3. **Container** — внутри `SizedBox` задается фиксированный размер 100x100 пикселей, а `Center` позволяет разместить текст внутри контейнера по центру.

#### Все настройки SizedBox

1. **width**
   * **Описание**: Устанавливает фиксированную ширину для `SizedBox`.
   *   **Пример**:

       ```dart
       width: 100 // Фиксированная ширина 100 пикселей
       ```
   * **Применение**: Используется для задания ширины, если необходимо контролировать горизонтальное пространство.
2. **height**
   * **Описание**: Устанавливает фиксированную высоту для `SizedBox`.
   *   **Пример**:

       ```dart
       height: 50 // Фиксированная высота 50 пикселей
       ```
   * **Применение**: Используется для задания высоты, если необходимо контролировать вертикальное пространство.
3. **child**
   * **Описание**: Дочерний виджет, который будет отображаться внутри `SizedBox`.
   *   **Пример**:

       ```dart
       child: Text('Hello') // Текст внутри SizedBox
       ```
   * **Применение**: Позволяет добавлять содержимое в `SizedBox`, сохраняя заданные размеры.

#### Итог

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