🧩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. С его помощью можно легко задать фиксированные размеры для элементов, что помогает создать аккуратные и структурированные пользовательские интерфейсы.

PreviousPaddingNextAlign

Last updated