Ждём... или используем скелетную анимацию?

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

Индикатор загрузки - простой и понятный способ показать, что контент загружается. Flutter предоставляет встроенный виджет CircularProgressIndicator.adaptive(), который адаптируется под разные платформы.

// Создает индикатор, который является 
// [CupertinoActivityIndicator] на iOS
// [CircularProgressIndicator] на других платформах
CircularProgressIndicator.adaptive();

Для более широких возможностей можно использовать пакеты, такие как:
- sleek_circular_slider
- flutter_spinkit

Скелетная анимация дает пользователю представление о том, какого типа контент загружается (изображение, текст, длинный текст и т.д.). Это воспринимается как более быстрое и плавное.

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

Для реализации скелетной анимации можно использовать пакет better_skeleton.

Оцените новую рубрику и напишите своё мнение в комментарии! 🤔💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #LoadingAnimation #AppDevelopment #FlutterTips

Шпаргалка по Android adb

Полезные команды для управления вашим Android-устройством через командную строку 🤖💻

Вход в оболочку телефона

adb shell # вход в оболочку телефона
# Android основан на unix, поэтому вы можете перемещаться 
# и выполнять команды как в обычной unix-системе

Установка и удаление APK

adb install myApp.apk # установить apk
adb install -r myApp.apk # обновить приложение без удаления его данных
adb uninstall myApp.apk # удалить приложение

Захват изображения и видео

adb shell screencap -p /sdcard/image.png # захватить изображение
adb shell screenrecord -p /sdcard/video.mp4 # захватить видео
adb -d pull /sdcard/image.png . # извлечь изображение или видео из папки sdcard

Отображение касаний на устройстве

adb shell content insert \
--uri content://settings/system \
--bind name:s:show_touches \
--bind value:i:1 # включить отображение касаний на устройстве

adb shell content insert \
--uri content://settings/system \
--bind name:s:show_touches \
--bind value:i:0 # отключить отображение касаний на устройстве

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #AndroidDev #MobileDev #DevTips #FlutterTips

Измерение производительности функции в тесте

Привет, Flutter-разработчики! 👋 Сегодня мы поделимся с вами полезным советом о том, как измерить производительность функции внутри теста. 🔍

Зачем это нужно?
- Оптимизация производительности вашего приложения 🔝
- Выявление узких мест в коде 🔎
- Улучшение пользовательского опыта 👥

Пример кода:

testWidgets('проверка производительности большой функции', (
  WidgetTester tester,
) async {
  // Запускаем секундомер
  final sw = Stopwatch()..start();
  await tester.tap(find.byKey(const ValueKey('btn')));
  await tester.pumpAndSettle(const Duration(milliseconds: 100));
  // Проверяем, что прошедшее время меньше 500 мс
  expect(sw.elapsedMilliseconds, lessThan(500));
});

Что здесь происходит? 🤔
1. Мы запускаем тест виджета с помощью `testWidgets`.
2. Запускаем секундомер (`Stopwatch`) перед выполнением тестируемой функции.
3. Выполняем необходимые действия (в данном случае тап по кнопке с ключом 'btn').
4. Проверяем, что общее время выполнения не превышает заданный порог (500 мс).

👍 Оцените эту рубрику и напишите в комментариях, какие темы вас интересуют! 💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #MobileDev #PerformanceOptimization #TestingInFlutter

Смена версии Flutter

Иногда это просто необходимо 🤔

Чтобы изменить версию Flutter, следуйте этим шагам:

1. Проверьте, где установлен Flutter на вашей системе, а затем выполните команду:

git checkout 1.22.6
# Обновление файлов: 100% (4559/4559), готово.
# Примечание: переключение на '1.22.6'.

Теперь следующая команда flutter установит все необходимые требования 📦

2. Чтобы вернуться к последней стабильной версии, просто используйте:

git checkout stable

ИЛИ

Используйте FVM, чтобы переключать версию Flutter напрямую 🔄

dart pub global activate fvm

Или используйте пакет brew... 🍺

fvm use 1.22.6

Больше информации на https://fvm.app/ 🤓

Оцените нашу новую рубрику! 👍👎
Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #FVM #FlutterTips #MobileDev #DevTips

Создаем защиту маршрута страницы

Привет, подписчики! 👋 Сегодня мы рассмотрим полезный совет по Flutter - создание защиты маршрута страницы. 🚀

Что это такое?

Защита маршрута страницы позволяет перенаправлять пользователя на другую страницу, если определенное условие не выполнено. 🔄

Пример реализации

Route<dynamic> route(RouteSettings settings) {
  switch (settings.name) {
    case 'init_account':
      return MaterialPageRoute(
        builder: (_) => AuthenticatedGuard(child: InitAccountPage()),
      );
  }
}

// AuthenticatedGuard внедряет нашу защиту, чтобы предотвратить доступ неавторизованного пользователя к нашей странице

class Guard extends StatelessWidget {
  final Future<bool> canActivate;
  final Widget child;
  final String fallbackRoute;

  const Guard({
    Key? key,
    required this.canActivate,
    required this.child,
    required this.fallbackRoute,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: canActivate,
      builder: (_, isOk) {
        if (!isOk.hasData || isOk.hasError) {
          return Container();
        }
        if (isOk.data!) {
          return child; // Показываем страницу, если условие выполнено
        }
        redirect(context); // Иначе перенаправляем
        return Container();
      },
    );
  }

  redirect(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      Navigator.pushReplacementNamed(context, fallbackRoute);
    });
  }
}

Совет для нескольких условий: вы можете каскадировать защиты или просто объединить ваши условия. 🤔

Оцените нашу новую рубрику и напишите в комментариях, что вы думаете! 💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FlutterTips #Programming #Development #Coding #FlutterCommunity