🧩Flexible

Что такое Flexible

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flexible Example')),
      body: Column(
        children: [
          Flexible(
            flex: 2, // Этот блок займет 2 части пространства
            child: Container(
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1, // Этот блок займет 1 часть пространства
            child: Container(
              color: Colors.green,
            ),
          ),
          Flexible(
            flex: 3, // Этот блок займет 3 части пространства
            child: Container(
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}
          

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

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

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

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

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

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

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

1. child

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

   • Пример:

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

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

2. flex

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

   • Пример:

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

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

Итог

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