Спам кнопок: как предотвратить множественные нажатия?

Вы когда-нибудь сталкивались с ситуацией, когда пользователь нажимает кнопку несколько раз подряд, вызывая нежелательные действия? 🤯

Представьте, что пользователь нажимает кнопку "Лайк" 10 раз за 1 секунду! 👍 Как сделать так, чтобы событие сработало только один раз? 🤔

Решение: использование RxDart с debounceTime ⏱️


import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/subjects.dart';
import 'package:rxdart/rxdart.dart';

class LikeButtonWidget extends StatefulWidget {
final Function onTap;

const LikeButtonWidget({required this.onTap, Key? key}) : super(key: key);

@override
_LikeButtonWidgetState createState() => _LikeButtonWidgetState();
}

class _LikeButtonWidgetState extends State<LikeButtonWidget> {
final pushSubject = BehaviorSubject<void>();
late StreamSubscription<void> pushSubscription;

@override
void initState() {
super.initState();
pushSubscription = pushSubject.stream
.debounceTime(const Duration(milliseconds: 1000))
.listen((_) {
// отправить запрос на сервер или выполнить другое действие
widget.onTap();
});
}

@override
void dispose() {
super.dispose();
pushSubscription.cancel(); // не забудьте отменить подписку на поток
}

@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
pushSubject.add(null);
},
child: const Icon(Icons.plus_one),
);
}
}


Этот код создает кнопку "Лайк", которая срабатывает только один раз в секунду, даже если пользователь нажимает ее несколько раз подряд. 🔥

Оцените нашу новую рубрику и оставьте свои отзывы! 😊

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #RxDart #DebounceTime #ButtonSpam #SpamProtection

Запускайте тесты на нескольких размерах экрана

Предотвратите переполнение для разных размеров экранов 🤯

Это позволит запустить тест с каждой конфигурацией экрана в screenSizeVariants 📱

final screenSizeVariants = ValueVariant<ScreenSize>(basicPhones);

testWidgets('''клик на кнопку => отображается закрепленный виджет наложения''', (
  WidgetTester tester,
) async {
  await tester.setScreenSize(screenSizeVariants.currentValue!);

  await tester.pumpWidget(const MyAppWithCircleAnchored());
  expect(find.byType(AnchoredHelper), findsNothing);
  await tester.tap(find.byType(OutlinedButton).first);
  await tester.pump(const Duration(seconds: 2));
  expect(find.byType(AnchoredHelper), findsOneWidget);
}, variant: screenSizeVariants);

import 'dart:ui';
import 'package:flutter_test/flutter_test.dart';

// это определяет конфигурацию размера конкретного устройства
class ScreenSize {
  // имя этой конфигурации
  final String name;

  // конфигурация размера и плотность пикселей
  final double width, height, pixelDensity;

  const ScreenSize(this.name, this.width, this.height, this.pixelDensity);

  @override
  String toString() => name;
}

extension ScreenSizeManager on WidgetTester {
  Future<void> setScreenSize(ScreenSize screenSize) async {
    return _setScreenSize(
      width: screenSize.width,
      height: screenSize.height,
      pixelDensity: screenSize.pixelDensity,
    );
  }

  Future<void> _setScreenSize({
    double width = 540,
    double height = 960,
    double pixelDensity = 1,
  }) async {
    final size = Size(width, height);
    await binding.setSurfaceSize(size);
    binding.window.physicalSizeTestValue = size;
    binding.window.devicePixelRatioTestValue = pixelDensity;
  }
}

Все подобные новости можно найти по хэштегу #FlutterPulseTips 👍

Оцените новую рубрику в комментариях! 💬

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #TestingTips #ScreenSize #FlutterTips

Изучаем OverflowBar: Легкое управление адаптивными строками и столбцами

Привет, разработчики Flutter! 👋 Вы когда-нибудь сталкивались с проблемой, когда содержимое строки или столбца выходит за пределы экрана? 🤔 Сегодня мы рассмотрим OverflowBar - удобный виджет, который помогает легко решить эту проблему! 💡

Что такое OverflowBar?
OverflowBar - это виджет, который располагает своих потомков в строке, если хватает места, или в столбце, если места недостаточно. 📐 Это особенно полезно для создания адаптивных интерфейсов, которые корректно отображаются на разных устройствах и в различных ориентациях экрана.

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

OverflowBar(
  children: [
    Image.asset('asset/image.jpg'), // Загружаем изображение из assets
    const Card(
      child: Text('My Title'), // Отображаем текст внутри карточки
    ),
  ],
);

Как видно из примера, OverflowBar автоматически определяет доступное пространство и перераспределяет элементы при необходимости. 🔄

Ключевые особенности:
- Автоматическое обнаружение переполнения и перераспределение элементов 🔍
- Возможность использования вместе с виджетом Wrap 🌟
- Гибкость в управлении выравниванием переполненных элементов ⚖️

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

👉 Оцените новую рубрику #FlutterPulseTips и оставьте свои отзывы! 💬

Все подобные новости вы можете найти по хэштегу #FlutterPulseTips.

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #AppDevelopment #CodingTips

Простой доступ к виджету в тесте

Привет, разработчики Flutter! 👋 Сегодня мы хотим поделиться с вами полезным советом, который сделает ваши тесты более читаемыми и быстрыми в написании. 📈

Вы когда-нибудь сталкивались с ситуацией, когда вам нужно было получить доступ к конкретному виджету внутри теста? 🤔 Обычно для этого приходилось писать длинные цепочки методов, что делало код теста громоздким и трудночитаемым. 😩

Но есть решение! 💡 Вы можете создать свою собственную утилиту для прямого доступа к виджету. 📦

import 'package:flutter_test/flutter_test.dart';

// Вспомогательная функция для прямого доступа к виджету
T findWidget<T>() => find
    .byType(T)
    .evaluate()
    .first
    .widget as T;

// Вспомогательная функция для прямого доступа к N-му виджету типа T
T findNWidget<T>(int n) => find
    .byType(T)
    .evaluate()
    .toList()
    .elementAt(n)
    .widget as T;

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

// можно заменить это
final miniature = find.byType(VideoMiniature)
    .evaluate()
    .first
    .widget as VideoMiniature;

// на это
final miniature = findWidget<VideoMiniature>();

Такой подход не только делает ваш код теста более читаемым, но и экономит время при написании новых тестов. ⏱️

Оцените нашу новую рубрику и оставьте свои отзывы! 🤗 Нам важно ваше мнение, чтобы мы могли делать наш контент лучше для вас.

Все подобные новости вы можете найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #MobileDevelopment #Testing #CodeQuality

Документ Firebase как модель сущности

Привет, разработчики Flutter! 👋 Сегодня мы поделимся с вами полезным советом о том, как использовать документ Firebase в качестве модели сущности в вашем приложении Flutter. 📱💻

Вы когда-нибудь сталкивались с необходимостью внедрить идентификатор документа Firebase в вашу модель данных, не сохраняя его в самом документе? 🤔 Теперь это легко сделать с помощью пакета json_serializable! 🎉

Вот пример кода, который показывает, как это можно сделать:

@JsонSerializable()
class DogEntity {
  // получаем id в нашу сущность
  @JsонKey(toJsон: Converters.id, includeIfNull: false)
  final String? id;
  final String name;

  // внедряем id в нашу сущность
  factory DogEntity.fromJsон(String id, Map<String, dynamic> jsон) =>
      _$DogEntityFromJsон(jsон..['id'] = id);

  ...
}

class Converters {
  // предотвращаем сохранение id в документ
  static String? id(String? id) => null;
}

В этом примере мы используем аннотацию @JsonKey для указания того, как должен быть сериализован идентификатор документа. Мы также используем фабричный конструктор fromJson для внедрения идентификатора документа в нашу модель данных. 📈

Оцените новую рубрику и напишите в комментариях, насколько она вам понравилась! 😊👍

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #Firebase #json_serializable #MobileDevelopment #FlutterTips