Flutter — Shimmer

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Shimmer use in flutter

Введение

A shimmer is анимация для отображения до загрузки данных. Приложения требуют времени для получения данных. При плохом интернет-соединении это может занять несколько секунд. Shimmer — это способ улучшения пользовательских интерфейсов.

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

shimmer для списка

Реализация Shimmers в Flutter

1. Установка пакета Shimmer

Запустите команду ниже, и зависимость появится в файле pubspec.yaml в разделе dependencies.

flutter pub add shimmer
dependencies:
  flutter:
    sdk: flutter

  shimmer: ^3.0.0

2. Импорт пакета Shimmer

Импортируйте пакет shimmer в файл dart, содержащий shimmer.

import 'package:shimmer/shimmer.dart';

3. Сначала создайте экран и примените Shimmer при загрузке

Создайте страницу списка и включите API для получения данных.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:shrimmer/components/shrimmer_hompage.dart'; // Исправленный импорт

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> catFacts = [];
  bool isLoading = true; // Отслеживание состояния загрузки

  @override
  void initState() {
    super.initState();
    fetchCatFacts();
  }

  Future<void> fetchCatFacts() async {
    setState(() {
      isLoading = true; // Показать shimmer перед получением данных
    });

    try {
      final response = await http.get(Uri.parse('https://meowfacts.herokuapp.com/?count=5'));

      if (response.statusCode == 200) {
        Map<String, dynamic> data = json.decode(response.body);
        setState(() {
          catFacts = List<String>.from(data['data']).take(5).toList();
        });
      } else {
        throw Exception('Не удалось загрузить факты о кошках');
      }
    } catch (e) {
      debugPrint('Ошибка при получении фактов о кошках: $e');
    } finally {
      setState(() {
        isLoading = false; // Остановить shimmer после получения данных
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          //содержимое app bar
        ),
      body: isLoading
          ? const ShimmerWidget() // Показать эффект shimmer во время загрузки
          : ListView.builder(
              itemCount: catFacts.length,
              itemBuilder: (context, index) {
                return Card(
                 //содержимое карточки
                );
              },
            ),
    );
  }
}

4. Реализация виджета Shimmer

Реализуйте виджет shimmer для использования на экране списка.

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

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(10),
            child: Padding(
              padding: const EdgeInsets.all(15),
              child: Row(
                children: [
                  Container(
                    height: 70,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

После разработки и запуска проекта shimmer будет применяться при загрузке данных.

Пример кода

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

GitHub - chamodlw/shrimmerВнесите свой вклад в развитие chamodlw/shrimmer, создав аккаунт на GitHub.

github.com

эффект шиммера в проекте 'Факты о кошках'

Ссылки

Официальный репозиторий пакетов Dart & Flutter содержит все инструкции по установке и использованию пакетов.

pub.dev