🧩SizedBox

Что такое SizedBox

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

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

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

SizedBox - создает пустоту между виджетами

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.

   • Пример:

     width: 100 // Фиксированная ширина 100 пикселей

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

2. height

   • Описание: Устанавливает фиксированную высоту для SizedBox.

   • Пример:

     height: 50 // Фиксированная высота 50 пикселей

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

3. child

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

   • Пример:

     child: Text('Hello') // Текст внутри SizedBox

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

Итог

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