Flutter Pulse

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

Привет, подписчики! 👋 Сегодня мы рассмотрим полезный совет по 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

163 views10:00

Flutter Pulse

Полезный совет по Dart: Как изменить версию Flutter

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

Иногда возникает необходимость изменить версию Flutter. Вот как это можно сделать:

1. Проверьте, где установлен Flutter на вашей системе, а затем выполните команду:
git checkout 1.22.6
> Updating files: 100% (4559/4559), done.
> Note: switching to '1.22.6'.

После этого следующая команда flutter установит все необходимые требования.

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

Или используйте FVM для быстрого переключения версий Flutter:

1. Активируйте FVM:
dart pub global activate fvm

2. Используйте нужную версию:
fvm use 1.22.6

Дополнительная информация доступна на сайте FVM:
https://fvm.app/docs/getting_started/installation
https://fvm.app/

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

Все подобные советы ищите по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #MobileDev #DevTips #FlutterCommunity

162 views10:00

Flutter Pulse



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);
    });
  }
}

👍1

151 views10:00

Flutter Pulse

166 views10:00

Flutter Pulse

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

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

Вы когда-нибудь сталкивались с ситуацией, когда нужно протестировать один и тот же сценарий с разными входными данными? Вместо того, чтобы писать множество повторяющихся тестов, вы можете использовать возможности ValueVariant из Flutter! 🔥



final timesVariant = ValueVariant<double>({1, 10, 100, 1000}); // Создаём вариант со списком значений

testWidgets('push counter N times', (
  WidgetTester tester,
) async {
  await tester.pumpWidget(const myApp()); // Инициализируем виджет
  for (int i = 0; i < timesVariant.currentValue!; i++) { // Получаем текущее значение варианта
    await tester.tap(find.byType(OutlinedButton).first); // Симулируем нажатие кнопки
  }
  expect(find.text("pushed ${timesVariant.currentValue!} times"), findsOneWidget); // Проверяем текст
}, variant: timesVariant); // Устанавливаем вариант для теста

В этом примере мы:
1. Создаём ValueVariant с нужными нам значениями.
2. Используем timesVariant.currentValue внутри теста, чтобы получить текущее значение.
3. Указываем variant: timesVariant, чтобы тест выполнился для каждого значения.

Таким образом, вы экономите время и пишете более чистый код! 💪

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #MobileDevelopment #Testing #ValueVariant #FlutterTesting #CodingTips

👍1

168 views12:50

Flutter Pulse

Форматирование JSON с помощью Dart

Привет, разработчики! 👋 Сегодня мы рассмотрим полезный совет по работе с JSON в Dart. Вы узнаете, как красиво напечатать JSON-строку, сделав её более читаемой и удобной для отладки 🛠️

Проблема: JSON-данные часто приходят в компактном, неформатированном виде, что затрудняет их чтение и анализ.

Решение: Используйте класс JsonEncoder из пакета dart:convert для форматирования JSON.


import 'dart:convert';

// Создаём кодировщик с отступами для форматирования
var encoder = const JsonEncoder.withIndent(' ');
// Преобразуем данные в красиво отформатированную строку
String prettyprint = encoder.convert(data);

Этот простой код позволяет превратить нечитаемую JSON-строку в структурированный и понятный формат с отступами 🌟

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #JSON #DartTips #FlutterTips #CodingTips #AppDevelopment #MobileDevelopment

👍3❤1

158 views10:00

Flutter Pulse

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

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

Это позволит запустить тест с каждой конфигурацией экрана в 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

👍1

155 views10:00

Flutter Pulse

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

Привет, разработчики 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

👍1🔥1

148 views10:00

Flutter Pulse

Документ 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

142 views10:00

Flutter Pulse

Как протестировать дизайн виджета?

Обеспечьте, чтобы обновления не влияли на то, как ваш виджет отображается для пользователя.

Используйте метод golden file. Это проверит, что дизайн остался таким же, как и на изображении.

Примечание: не смотрите на изображение. Это внутреннее представление, и оно не будет выглядеть так, как при запуске вашего приложения.



testWidgets('Golden test', (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  await expectLater(
    find.byType(MyCard),
    matchesGoldenFile('card.png')
  );
});

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

Как сгенерировать Golden файлы?



flutter test --update-goldens

Это сгенерирует golden файлы для каждого вызова matchesGoldenFile в ваших тестах.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #WidgetTesting #GoldenFiles #FlutterTips #DevelopmentTips

90 views10:00

About

Blog

Apps

Platform