Распознавание виджетов на экране приложения Flutter

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga и соавтор телеграм-канала Flutter. Много. Сегодня мы вновь займемся практикой! Расскажу об интересной теме — определение положения объекта на экране. Это может быть полезно, когда мы хотим понять, виден тот или иной виджет на экране в данный момент или нет.

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

Как же это сделать?

Для начала создадим кастомный виджет уведомления. Для определения объекта на экране используем пакет visibility_detector. При применении данного пакета  обязательно используйте UniqueKey, так как данный пакет включает в себя RenderObject.

import 'package:flutter/material.dart'; import 'package:hmelbakery/core/style/colors.dart'; import 'package:visibility_detector/visibility_detector.dart';   class NotificationChip extends StatefulWidget {  NotificationChip({    required this.index,    required this.visibleIndex,    super.key,    this.title = '',    this.text = '',    this.subtitle = '',    this.status = true,  });    final String title;  final int index;  final ValueChanged<int> visibleIndex;  final String text;  final String subtitle;  final bool status;    @override  State<NotificationChip> createState() => _NotificationChipState(); }   class _NotificationChipState extends State<NotificationChip> {  final UniqueKey key = UniqueKey();  late bool _visible;    @override  void initState() {    _visible = widget.status;    super.initState();  }    @override  Widget build(BuildContext context) {    return VisibilityDetector(      onVisibilityChanged: !_visible          ? (visibilityInfo) {              // Здесь определяется на сколько виден объект в процентах              var visiblePercentage = visibilityInfo.visibleFraction * 100;              if (visiblePercentage == 100.0) {                setState(() {                  _visible = true;                });                widget.visibleIndex.call(widget.index); // прочитали              }            }          : null,      key: key,      child: Container(        decoration: BoxDecoration(color: AppColors.grey, borderRadius: BorderRadius.circular(16)),        child: Padding(          padding: const EdgeInsets.all(16),          child: Column(            mainAxisAlignment: MainAxisAlignment.start,            crossAxisAlignment: CrossAxisAlignment.start,            children: [              Row(                mainAxisAlignment: MainAxisAlignment.spaceBetween,                children: [                  Text(                    widget.title,                    style: Theme.of(context).textTheme.titleLarge,                  ),                  if (!_visible)                    Container(                      width: 16,                      height: 16,                      decoration: const BoxDecoration(                        color: AppColors.yellow,                        shape: BoxShape.circle,                      ),                    ),                ],              ),              const SizedBox(height: 8),              Text(widget.text, style: Theme.of(context).textTheme.bodyMedium),              const SizedBox(height: 16),              Text(                widget.subtitle,                style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: AppColors.black400),              ),            ],          ),        ),      ),    );  } }

Отображаем список уведомлений на экране.

ListView.builder(    padding: const EdgeInsets.symmetric(horizontal: 16),    itemBuilder: (BuildContext context, int index) {      if (index == state.pageState.data.length - 1 && !state.pageState.loadNewPage) {        context.read<ProfileNotificationsBloc>().add(ProfileNotificationsFetchDataEvent());      }      return Column(        children: [          NotificationChip(            title: state.pageState.data[index].title,            text: state.pageState.data[index].text,            subtitle: DateConverter.formattingDateWTime(state.pageState.data[index].datetime),            status: !(state.pageState.data[index].statusCode == 'unread'),            index: index,            visibleIndex: (int value) {              context                  .read<ProfileNotificationsBloc>()                  .add(ProfileNotificationsMarkReadEvent(index: value)); // передаем в блок индекс прочитаного             },          ),          const SizedBox(height: 8),          if (index == state.pageState.data.length - 1 && state.pageState.loadNewPage) ...[            const Center(child: CircularProgressIndicator(color: AppColors.black)),            const SizedBox(height: 20),          ],        ],      );    },    itemCount: state.pageState.data.length,  ),

В блоке создаем список прочитанных индексов и тут же меняем состояние тех, что уже просмотрели, для снятия значка «прочитанности». 

markRead(ProfileNotificationsMarkReadEvent event, emit) async {  if (!state.pageState.readIndexes.contains(event.index)) {    emit(ProfileNotificationsUp(state.pageState.copyWith(      readIndexes: [...state.pageState.readIndexes, event.index],      data: state.pageState.data..[event.index] = state.pageState.data[event.index].copyWith(statusCode: 'read'),    )));  } }

Далее нужно решить задачу, как правильно отправить на сервер информацию? Не будем же мы каждый прочитанный индекс отправлять, верно?

Timer? _timer; List<int> _tempList = [];   _timerFunc() { // старт функции в блоке  _timer = Timer.periodic(    const Duration(seconds: 1),    (timer) {      if (_tempList.length < state.pageState.readIndexes.length) {        _tempList = state.pageState.readIndexes;        notificationsRepository.markRead(          request: MarkReadNotificationRequest(            notifications: state.pageState.data                .sublist(_tempList.first, _tempList.length > 1 ? _tempList.last : _tempList.first + 1)                .map((e) => e.id)                .toList(),          ),        );      }    },  ); }

Создаем таймер, который каждую секунду проверяет изменился ли список прочитанных уведомлений, и тогда отправляем на сервер. Конечно же мы не будем заставлять пользователя ждать ответа и блокировать экран загрузкой, поэтому не используем async/await. 

Всё готово! Надеюсь, вам будет полезно. Делитесь в нашем чате мобильных разработчиков о своем опыте применения пакета visibility_detector. 

А также всегда ждем вас в нашем телеграм-канале Flutter. Много, который мы ведем командой мобильных разработчиков. Рассказываем про свой личный опыт и делимся советами от софт-скиллов до технических знаний. Присоединяйтесь!