Как используешь Container?

Как используешь Container?

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

Основное назначение Container

Container объединяет несколько меньших виджетов в один, используемый обычно для декорирования. Он может применять отступы (padding), границы (border), фоновой цвет (color), тень (shadow), закругления углов и многое другое.

Базовое использование

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Text("Hello"),
)

Основные свойства:

• width / height — размеры контейнера
• color — фоновый цвет
• child — содержимое внутри
• padding — внутренние отступы
• margin — внешние отступы

Декорирование (Decoration)

Для сложного оформления используется свойство decoration:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Center(
    child: Text("Card"),
  ),
)

Отступы: padding vs margin

Padding — внутренние отступы (внутри контейнера):

Container(
  color: Colors.red,
  padding: EdgeInsets.all(20),  // Одинаковые отступы со всех сторон
  child: Text("Content"),
)

// Или разные отступы
padding: EdgeInsets.only(
  top: 10,
  bottom: 10,
  left: 20,
  right: 20,
)

Margin — внешние отступы (снаружи контейнера):

Container(
  color: Colors.blue,
  margin: EdgeInsets.all(16),  // Отступ от соседних виджетов
  child: Text("Spaced"),
)

Трансформация

Container может применять трансформации к содержимому:

Container(
  width: 200,
  height: 200,
  transform: Matrix4.identity()
    ..translate(10, 20)  // Сдвиг
    ..rotateZ(0.1)       // Ротация
    ..scale(1.2),        // Масштабирование
  child: Image.asset('assets/logo.png'),
)

Gradient фоны

Используя BoxDecoration можно создавать градиенты:

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Center(
    child: Text(
      "Gradient Background",
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Практические примеры

Card-подобный виджет

Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.2),
        blurRadius: 8,
      ),
    ],
  ),
  child: Column(
    children: [
      Text("Card Title", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
      SizedBox(height: 10),
      Text("Card content"),
    ],
  ),
)

Кнопка с эффектом

Container(
  width: 200,
  height: 50,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(25),
    boxShadow: [
      BoxShadow(
        color: Colors.blue.withOpacity(0.4),
        blurRadius: 10,
        spreadRadius: 2,
      ),
    ],
  ),
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      onTap: () => print("Clicked"),
      borderRadius: BorderRadius.circular(25),
      child: Center(
        child: Text(
          "Click me",
          style: TextStyle(color: Colors.white, fontSize: 16),
        ),
      ),
    ),
  ),
)

Разделитель/Линия

Container(
  width: double.infinity,
  height: 1,
  color: Colors.grey[300],
  margin: EdgeInsets.symmetric(vertical: 16),
)

Когда НЕ использовать Container

// ❌ Неправильно — излишний Container
Container(
  child: Text("Hello"),  // Можно просто Text
)

// ❌ Слишком много вложенности
Container(
  child: Container(
    child: Container(
      child: Text("Nested"),
    ),
  ),
)

// ✅ Правильно — используй специализированные виджеты
Padding(
  padding: EdgeInsets.all(16),
  child: Text("Hello"),
)

Лучшие практики

Используй const когда возможно:

const Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

Избегай излишних Containers:

// ❌ Можно упростить
Container(
  padding: EdgeInsets.all(16),
  child: Container(
    color: Colors.red,
    child: Text("Hello"),
  ),
)

// ✅ Лучше
Container(
  padding: EdgeInsets.all(16),
  color: Colors.red,
  child: Text("Hello"),
)

Используй SizedBox для простых размеров:

// ❌ Излишне
Container(width: 100, height: 100)

// ✅ Лучше
SizedBox(width: 100, height: 100)

Производительность

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

Container — это мощный и гибкий виджет, которым нужно пользоваться мудро, понимая его стоимость и используя более специализированные альтернативы, когда они подходят.