Ускорьте Firebase Firestore на iOS

Firestore долго компилируется каждый раз, когда вы запускаете приложение с нуля...

...Хорошая новость в том, что есть решение, предоставленное invertase 🙌

Откройте файл podfile для iOS
Добавьте pod 'FirebaseFirestore'... следующим образом:

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  # ДОБАВЬТЕ ЭТО
  pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '11.2.0'

Вам нужно добавить соответствующую версию, используемую в вашем Flutter-зависимости.

Оцените новую рубрику лайком 👍! Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Firebase #iOS #Firestore #MobileDevelopment #FlutterTips

Builder with Dart
Dart позволяет сделать это без какого-либо шаблонного кода 🚀

В Dart вы можете использовать cascade notation для последовательного выполнения операций над одним и тем же объектом 🔥

class MyModel {
  String? name;
  String? title;
  int? count;

  MyModel({
    this.name,
    this.title,
    this.count,
  });
}

void main() {
  final model = MyModel()
    ..name = 'John Doe' // Установка имени
    ..title = 'Software Engineer' // Установка должности
    ..count = 42; // Установка счетчика

  final model2 = MyModel()
    ..name = 'Jane Doe'
    ..title = 'Data Scientist'
    ..count = 100;
}

В этом примере мы используем cascade notation (..), чтобы задать значения полям объекта MyModel последовательно 💡

Зачем это нужно?
- Упрощает код, убирая необходимость в отдельных методах-сеттерах 🔄
- Делает код более читаемым и удобным для поддержки 📖

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #DartTips #MobileDevelopment #CodingTips #SoftwareDevelopment #CascadeNotation

Как создать таймер
Создание точного таймера с помощью Flutter

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

Проблема с обычным таймером:
- Задержки и тики могут быть не идеально точными, особенно при высокой нагрузке на CPU.

Мы используем специальные колбэки для обновления виджета с анимациями. Обновляем наш виджет каждую секунду и запускаем анимацию соответствующим образом.

Код контроллера таймера:

class TimerController {
  Timer? _timer;
  DateTime? timerEndTime;
  DateTime? timerStartTime;
  TimerState state;
  Duration duration;
  Duration? remaining;
  VoidCallback? onInit;
  VoidCallback? onStart;
  VoidCallback? onPause;
  TimerTick? onTick;
  List<VoidCallback> onCompleteListener;
  List<VoidCallback> _onTickListener;

  BasicTimerController({
    required this.state,
    required this.duration,
    required this.timerEndTime,
    this.remaining,
    this.timerStartTime,
  })  : onCompleteListener = [],
        _onTickListener = [] {
    remaining ??= duration;
  }

  Duration? get elapsed {
    if (remaining == null) {
      return null;
    }
    return duration - remaining!;
  }

  void start() {
    state = TimerState.running;
    final isNewTimer = remaining == null;
    if (isNewTimer) {
      timerStartTime = DateTime.now();
      timerEndTime = timerStartTime!.add(duration);
    } else {
      timerEndTime = DateTime.now().add(remaining!);
      timerStartTime = timerEndTime!.subtract(remaining!);
    }

    onInit?.call();
    onStart?.call();
    remaining ??= duration;

    // Мы могли бы обновлять чаще, но это было бы бесполезно
    const timerFrequency = Duration(milliseconds: 1000);
    _timer = Timer.periodic(timerFrequency, (timer) {
      if (remaining == null || remaining! <= Duration.zero) {
        stop();
        return;
      }
      if (timerEndTime == null) {
        return;
      }
      remaining = timerEndTime!.difference(DateTime.now());
      onTick?.call(remaining!);
      for (final listener in _onTickListener) {
        listener();
      }
    });
  }

  @override
  void pause() {
    _timer?.cancel();
    state = TimerState.paused;
  }
}

Ключевые моменты:
- Если вы знаете, когда таймер должен начаться и закончиться, ваш таймер останется точным, даже если пользователь закроет приложение и вернется.

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #Таймер #Точность #FlutterРазработка

Рисуем таймер
Создание точного таймера с помощью Flutter часть 2

Мы можем использовать шейдер в нашем кастомном рисовальщике (painter).

Мы рисуем полный круг, который будет отображаться постепенно.

Затем мы рисуем круг, который будет уменьшаться каждую секунду.

Мы перерисовываем только если прогресс изменился.

Ну а если вы хотите протестировать какой-то угол вручную...

class CircleTimerPainter extends CustomPainter {
  final double progress;
  final Color progressColor;
  final Color backgroundColor;

  CircleTimerPainter({
    super.repaint,
    required this.progress,
    this.progressColor = Colors.blue,
    this.backgroundColor = Colors.grey,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final angle = 360 * progress; // примечание: Используйте напрямую радианы для лучшей производительности
    final backgroundPaint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 28;

    final progressPaint = Paint()
      ..shader = SweepGradient(
        colors: [
          progressColor,
          Colors.red,
        ],
        startAngle: 0 - 90.0.radians,
        endAngle: angle.radians,
      ).createShader(
        Rect.fromCircle(
          center: Offset(size.width / 2, size.height / 2),
          radius: size.width / 2),
      )
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 20;

    // Рисуем фоновый круг
    canvas.drawCircle(
      size.center(Offset.zero),
      size.width / 2,
      backgroundPaint,
    );

    canvas.drawArc(
      Rect.fromLTWH(0, 0, size.width, size.height),
      -90.0.radians,
      angle.radians,
      false,
      progressPaint,
    );
  }

  @override
  bool shouldRepaint(covariant CircleTimerPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

extension RadianExt on double {
  double get radians => this * (math.pi / 180);
}

Оцените новую рубрику! 👍💬
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #UIUX #FlutterCommunity

Получение данных с использованием http-клиента
Как получить данные с удаленного сервера, используя http-клиент 🤔

Шаг 1: Установите пакет http 📦

Future<T> request<T>({
  required String endpoint,
  Map<String, String>? headers,
  Map<String, String>? queryParams,
}) async {
  final url = Uri(
    scheme: config.baseUrlScheme, // http или https
    host: config.baseUrlHost, // localhost или mydomain.com
    path: endpoint, // /api/articles
    queryParameters: queryParams,
    port: config.baseUrlPort, // порт вашего бэкенда
  );

  final response = await http.get(
    url,
    headers: {
      ...?headers, // Предоставление пользовательских заголовков, например, токена API
    },
  );

  if (response.statusCode != 200) {
    throw Exception('Запрос к API завершился неудачей: ${response.statusCode} ${response.reasonPhrase}');
  }

  return json.decode(response.body) as T; // Возвращение обобщенного типа T
}

* Возвращение обобщенного типа T, чтобы можно было напрямую возвращать другой тип. Рекомендуется использовать пакет json_serializable для легкого парсинга объектов 📄
* Предоставление пользовательских заголовков, таких как токен API 🔒
* Улучшение: отправка пользовательских ошибок в зависимости от кода состояния ⚠️

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #Coding #SoftwareDevelopment

Шпаргалка по InteractiveViewer

InteractiveViewer - это виджет, который позволяет пользователям перемещать, масштабировать и взаимодействовать с дочерним содержимым с помощью жестов, таких как сжатие и перетаскивание.

InteractiveViewer(
  transformationController: TransformationController()
    ..value = (Matrix4.identity()..scale(scale)),
  scaleEnabled: false,
  constrained: false,
  panEnabled: false,
  onInteractionStart: (details) => print('Начало взаимодействия'),
  onInteractionUpdate: (details) => print('Обновление взаимодействия'),
  onInteractionEnd: (details) => print('Конец взаимодействия'),
  child: Image.asset("name_of_your_image.png"),
)

* scaleEnabled:
* Позволяет пользователю масштабировать с помощью жестов сжатия (по умолчанию: true).
* Установите значение false, чтобы отключить масштабирование.
* constrained:
* Ограничивает дочерний элемент в пределах границ просмотра (по умолчанию: true).
* Установите значение false для неограниченного перемещения/масштабирования за пределами границ просмотра.
* panEnabled:
* Позволяет перетаскивать/перемещать дочерний элемент с помощью касания (по умолчанию: true).
* Установите значение false, чтобы отключить перемещение.
* onInteractionStart:
* Callback, срабатывающий при начале взаимодействия (перемещение или масштабирование).
* Предоставляет детали, такие как фокусная точка и масштаб.
* onInteractionUpdate:
* Callback, вызываемый непрерывно при перемещении или масштабировании пользователем.
* Полезно для отслеживания обновлений жестов в реальном времени.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #FlutterTips #CodingCheatsheet

Шпаргалка по форматированию цен

Вы можете легко форматировать цены, используя пакет intl. Вот наиболее распространенные методы:

import 'package:intl/intl.dart';

// Форматирование с указанием локали и символа валюты
NumberFormat.currency(locale: 'en_US', symbol: '\$').format(12.2);
// $12.2

// Форматирование валюты с использованием текущей локали устройства
NumberFormat.currency().format(12.2);
// US 12.2 или EUR 12.2 в зависимости от локали устройства

// Форматирование валюты без десятичных знаков
NumberFormat.currency(decimalDigits: 0).format(12.2);
// US 12

// Простое форматирование валюты
NumberFormat.simpleCurrency().format(12.2);
// $12.2

// Компактное форматирование больших чисел
NumberFormat.compactSimpleCurrency().format(1200000);
// $1.2M

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #Coding #FlutterTips

Как правильно обрабатывать результат диалога

Не пытайтесь выполнить код напрямую после закрытия диалога! 🚫💻

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

Неправильный способ: 🚫

Future<void> showRatingDialog(BuildContext context) {
  return showDialog<RatingResult>(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      return AlertDialog(
        title: const Text('Rate the app'),
        content: const Text('Please rate the app'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              // не пытайтесь выполнить что-либо здесь
              // потому что диалог отклонен
            },
            child: const Text('Rate'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              // не пытайтесь выполнить что-либо здесь
              // потому что диалог отклонен
            },
            child: const Text('Improve'),
          ),
        ],
      );
    },
  );
}

Правильный способ: ✅

enum RatingResult {
  rate,
  improve,
  never,
}

Future<RatingResult?> showRatingDialog(BuildContext context) {
  return showDialog<RatingResult>(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      return AlertDialog(
        title: const Text('Rate the app'),
        content: const Text('Please rate the app'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(RatingResult.rate);
            },
            child: const Text('Rate'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(RatingResult.improve);
            },
            child: const Text('Improve'),
          ),
        ],
      );
    },
  );
}

В первом примере при нажатии на кнопки "Rate" или "Improve" диалог закрывается, но результат не возвращается. Во втором примере при нажатии на кнопки возвращается соответствующее значение из enum `RatingResult`, что позволяет корректно обработать результат.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #UIUX #SoftwareDevelopment

Как воспроизвести звуки в Flutter

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

Шаг 1: Установите плагин audioplayers

import 'package:audioplayers/audioplayers.dart';

Шаг 2: Воспроизведите звук напрямую...

await player.play(AssetSource("sounds/beep.wav"));

Это здорово, потому что вам не нужно готовить файл или сбрасывать его, если он уже был воспроизведен... просто попросите воспроизвести, и он сделает свое дело! 👍

Дополнительные возможности

// Установите режим освобождения, чтобы сохранить источник после завершения воспроизведения.
player.setReleaseMode(ReleaseMode.stop);

Это позволяет вам делать гораздо больше, чем просто воспроизводить звук. А за этой простотой вы также можете действительно оптимизировать с помощью расширенных конфигураций, таких как режим освобождения 🔧

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #mobiledevelopment #appdevelopment #codingtips #programming #softwaredevelopment

Перегрузка операторов
Ещё один отличный способ улучшить читаемость кода 😉

Вы знаете, что в Dart можно перегружать операторы? 🤔 Это очень полезная функция, которая позволяет сделать ваш код более интуитивным и понятным.

Давайте рассмотрим пример с классом Vector. Мы хотим складывать векторы с помощью оператора +. Для этого нам нужно перегрузить этот оператор в нашем классе.

class Vector {
  final int x, y;
  Vector(this.x, this.y);

  // Перегружаем оператор +
  Vector operator +(Vector other) => Vector(x + other.x, y + other.y);
}

void main() {
  final v1 = Vector(1, 2);
  final v2 = Vector(3, 4);

  final result = v1 + v2; // Теперь мы можем складывать векторы с помощью оператора +
  print('(${result.x}, ${result.y})'); // Вывод: (4, 6)
}

Таким образом, мы можем перегружать любые операторы, такие как -, *, / и другие, чтобы сделать наш код более удобным и читаемым. 👍

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #codingTips #mobileDevelopment #programmingTips

Single execution Future Builder

FutureBuilder с единственным выполнением

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

Мы предоставляем Future функцию, которая предотвращает повторное выполнение Future при каждой пересборке страницы.

typedef AsyncFutureBuilder<T> = Future<T> Function();

class SingleExecFutureBuilder<T> extends StatefulWidget {
  final AsyncFutureBuilder<T> future;
  final Widget Function(BuildContext context, T data) builder;

  const SingleExecFutureBuilder({
    super.key,
    required this.future,
    required this.builder,
  });

  @override
  State<SingleExecFutureBuilder<T>> createState() => _SingleExecFutureBuilderState<T>();
}

class _SingleExecFutureBuilderState<T> extends State<SingleExecFutureBuilder<T>> {
  T? _futureRes;
  late FutureState _futureState;

  @override
  void initState() {
    super.initState();
    _futureState = FutureState.pending;
  }

  Future<T?> executeFuture() async {
    if (_futureState == FutureState.pending) {
      try {
        _futureRes = await widget.future();
        _futureState = FutureState.done;
        return _futureRes;
      } catch (e) {
        _futureState = FutureState.error;
        rethrow;
      }
    }
    return _futureRes;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<T>(
      future: executeFuture(),
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return const SizedBox.shrink();
        }
        return widget.builder(context, snapshot.data as T);
      },
    );
  }
}

enum FutureState { pending, done, error }

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('Count: $count'),
          const SizedBox(height: 16),
          SingleExecFutureBuilder<String>(
            future: () async {
              print("Getting future once");
              await Future.delayed(const Duration(milliseconds: 1100));
              return "Hello";
            },
            builder: (context, data) => Text(data),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: const Text('+'),
          ),
        ],
      ),
    ),
  );
}

Выполните этот код, и вы увидите "Getting future once" только один раз, вместо того, чтобы видеть это каждый раз, когда вы нажимаете кнопку "+".


Оцените новую рубрику по Flutter советам! 👍💬 Нам важно ваше мнение, чтобы мы могли улучшать контент для вас! 😊👍

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FutureBuilder #FlutterTips #CodingTips #AppDevelopment