Какой канал про Flutter без рубрики #пакет_недели, подумали мы, и вот первый выпуск!

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

Главное про Skeletonizer:

🔸Он автоматически создает скелетоны. Пакет анализирует дерево виджетов и формирует анимацию загрузки, повторяя их форму, размеры и расположение.

🔸Он поддерживает кастомизацию. Skeletonizer позволяет настроить анимацию, цвет и форму скелетона.

🔸Его легко интегрировать. Можно просто обернуть виджет в Skeletonizer и сразу получить эффект анимации.

🔸Он поддерживает большинство стандартных виджетов. Например, Container, Text, или ListView.

Как использовать

Создадим анимацию загрузки для карточки профиля:

import 'package:flutter/material.dart';
import 'package:skeletonizer/skeletonizer.dart';

class ProfileSkeletonDemo extends StatelessWidget {
  final bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Skeleton Profile Example')),
      body: Center(
        child: Skeletonizer(
          enabled: isLoading,
          child: Card(
            child: ListTile(
              leading: CircleAvatar(radius: 30),
              title: Text('John Doe'),
              subtitle: Text('Flutter Developer'),
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: ProfileSkeletonDemo()));

По умолчанию Skeletonizer создает анимацию, похожую на движущийся светлый блик по заливке виджета. Но ее можно кастомизировать с помощью разных параметров:

backgroundColor: задает основной цвет скелетона.
highlightColor: задает цвет блика.
duration: продолжительность одного цикла анимации.
borderRadius: радиус закругления углов.

Например:

Skeletonizer(
  enabled: true,
  duration: Duration(seconds: 1), // Продолжительность анимации
  backgroundColor: Colors.grey[200], // Цвет фона скелетона
  highlightColor: Colors.grey[100], // Цвет анимированной заливки
  child: YourWidget(),
);

Режим скелетона можно включать и выключать в зависимости от состояния загрузки данных:

Skeletonizer(
  enabled: isLoading, // Условие включения скелетона
  child: isLoading ? Placeholder() : ContentWidget(),
);

❗️Если виджетов много, Skeletonizer может привести к проблемам с производительностью, особенно на слабых устройствах.

🔥— попробуем красивые скелеты Skeletonizer
🙅— вставим из старых проектов