Какими виджетами в Flutter пользуешься чаще всего?

Ответ

Я условно делю часто используемые виджеты на несколько категорий:

1. Виджеты компоновки (Layout): Базовый строительный блок любого UI.

  • Column / Row: Для вертикального и горизонтального расположения дочерних виджетов.
  • Stack: Для наложения виджетов друг на друга (например, кнопка поверх изображения).
  • Expanded / Flexible: Для управления тем, как дочерние виджеты внутри Column/Row занимают доступное пространство.
  • Container: Универсальный виджет для отступов (padding), границ (decoration), ограничений по размеру (constraints).

2. Виджеты для списков и скролла:

  • ListView: Основной виджет для скроллируемых списков. Чаще всего использую ListView.builder для эффективного рендеринга больших списков.
  • GridView: Для отображения данных в виде сетки.
  • SingleChildScrollView: Для добавления скролла к экрану, который не помещается в область просмотра.

3. Базовые виджеты содержимого и интерактива:

  • Text с TextStyle: Для любого текста.
  • ElevatedButton, TextButton, IconButton: Для интерактивных элементов.
  • TextField: Для ввода текста.
  • Image (.asset, .network): Для отображения изображений.

4. Структурные виджеты:

  • Scaffold: Каркас экрана, предоставляет AppBar, Drawer, BottomNavigationBar, FloatingActionButton.
  • MaterialApp / CupertinoApp: Корневой виджет, задающий дизайн-систему и навигацию всего приложения.

Пример типичной структуры экрана:

Scaffold(
  appBar: AppBar(title: Text('Список товаров')),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(decoration: InputDecoration(hintText: 'Поиск...')),
      ),
      Expanded(
        child: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ProductCard(product: products[index]);
          },
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () => _addNewProduct(),
    child: Icon(Icons.add),
  ),
)

Ответ 18+ 🔞

А, ну так вот, смотри. Я тут условно все эти виджеты, с которыми постоянно приходится возиться, по полочкам разложил. Не то чтобы это какая-то священная истина, но так проще в голове держать, когда очередной экран пишешь.

1. Виджеты компоновки (Layout): Это, блядь, фундамент, на котором всё держится. Без них нихуя не соберёшь.

  • Column / Row: Ну это вообще основа основ. Хочешь вертикально — Column, горизонтально — Row. Без них как без рук, ёпта.
  • Stack: Когда нужно наложить одно говно поверх другого. Типа аватарку в кружок обернуть, или кнопку «play» на превью видео воткнуть.
  • Expanded / Flexible: Вот эти ребята — настоящие хитрожопые. Когда внутри Row или Column нужно, чтобы один виджет жрал всё свободное место, а другие ютились по краям. Без них иногда просто пиздец, всё расползается.
  • Container: Универсальная бандура. Нужны отступы? padding. Нужна рамка или фон? decoration. Ограничить размер? constraints. Швейцарский нож, только для виджетов.

2. Виджеты для списков и скролла:

  • ListView: Король скроллируемых списков. Если список длинный — только ListView.builder, иначе приложение сожрёт всю оперативку и накроется медным тазом. Серьёзно, доверия к обычному ListView — ноль ебать.
  • GridView: Для тех случаев, когда нужно не в линию, а сеткой. Галерея фоток, каталог товаров — его вотчина.
  • SingleChildScrollView: Ленивое, но иногда спасительное решение. Когда весь экран не влезает, оборачиваешь его в эту штуку и поехали. Но если внутри будет сложная вёрстка, может начать тормозить, имей в виду.

3. Базовые виджеты содержимого и интерактива:

  • Text с TextStyle: Ну тут всё ясно, без текста никуда. А TextStyle — это чтобы не просто серые буквы, а с душой, с жирностью, с цветом.
  • ElevatedButton, TextButton, IconButton: Кнопки на все случаи жизни. Нажал — что-то произошло. Магия, блядь.
  • TextField: Куда же без поля для ввода. Логин, пароль, поиск — везде он.
  • Image: Картинки. Либо из своих ресурсов (.asset), либо из интернета (.network). С последними осторожнее, а то могут и не загрузиться, и будет вместо фото пустое место, удивление пиздец.

4. Структурные виджеты:

  • Scaffold: Это типа каркас, скелет твоего экрана. В него ты уже вставляешь AppBar (шапку), body (тело), BottomNavigationBar (нижнее меню) или FloatingActionButton (эту плавающую хрень). Без него как будто голый.
  • MaterialApp / CupertinoApp: А это, можно сказать, главный начальник всего приложения. Задаёт, по каким правилам всё будет выглядеть (материал от Google или купертино от Apple) и как будет работать навигация.

Вот смотри, как это обычно в коде выглядит, типичная история:

Scaffold(
  appBar: AppBar(title: Text('Список товаров')),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(decoration: InputDecoration(hintText: 'Поиск...')),
      ),
      Expanded(
        child: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) {
            return ProductCard(product: products[index]);
          },
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () => _addNewProduct(),
    child: Icon(Icons.add),
  ),
)

Вот видишь? Scaffold — каркас. Внутри Column, чтобы поиск был сверху, а под ним список. А список (ListView.builder) обёрнут в Expanded, чтобы он занял всё оставшееся место и нормально скроллился. И сверху ещё плавающая кнопка болтается. Всё логично, ебать мои старые костыли. Сначала кажется, что овердохуища всего, но потом привыкаешь и собираешь интерфейсы как конструктор.