Воспроизведение видео на весь экран
Покажите полноэкранное видео с правильным соотношением сторон 🤩

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

1. Установите пакет video_player 📦
2. Встройте видеоплеер внутрь виджета VideoContainer 📺

Обеспечьте, чтобы содержимое занимало весь экран 📱

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
  ),
  extendBodyBehindAppBar: true,
  body: Stack(
    children: [
      Positioned.fill(
        child: GestureDetector(
          onTap: () => videoListener?.pauseOrResume(),
          child: VideoContainer.fromController(_controller!),
        ),
      ),
    ],
  ),
);

Код виджета VideoContainer:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoContainer extends StatelessWidget {
  final Widget child;
  final double ratio;
  final Size contentsSize;

  const VideoContainer({
    super.key,
    required this.child,
    required this.ratio,
    required this.contentsSize,
  });

  factory VideoContainer.fromController(VideoPlayerController controller) => 
  VideoContainer(
    ratio: controller.value.aspectRatio,
    contentsSize: controller.value.size,
    child: VideoPlayer(controller),
  );

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      fit: BoxFit.cover,
      child: AspectRatio(
        aspectRatio: ratio,
        child: child,
      ),
    );
  }
}

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

#flutter #dart #flutterpulse #FlutterPulseTips #mobiledev #appdev #codingtips #uiux #videostreaming #fullscreenvideo

Получайте ⭐ отзывы в магазинах
Это не так просто, но есть некоторые нюансы, которые стоит знать

Проблема:
• Apple Store ограничивает запрос оценки через нативное всплывающее окно до 2 раз в год
• Google Play Store ограничивает запрос оценки примерно 2 раза каждые 3 месяца...
• Вы не хотите докучать пользователям и получать плохие оценки

Запрашивайте оценку в подходящее время:
Найдите "момент истины", когда пользователь получил наилучший опыт от использования вашего приложения. И запросите оценку именно в этот момент. Никогда не спрашивайте оценку у тех, кто только что установил приложение или никогда с ним не взаимодействовал...
Будьте терпеливы

Решение:
Создайте предварительный попап или карточку в вашем приложении
Но не пытайтесь повлиять на решение пользователя

void _showReviewPopup() {
  // Проверяем, согласен ли пользователь оставить отзыв
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Оцените наше приложение!'),
        content: Text('Если вам нравится наше приложение, пожалуйста, оставьте отзыв в магазине приложений.'),
        actions: <Widget>[
          TextButton(
            child: Text('Не сейчас'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('Оставить отзыв'),
            onPressed: () {
              // Ссылка на страницу оценки в магазине
              launchReviewUrl(); // Реализуйте эту функцию для открытия нужного URL
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

// Функция для открытия URL (пример)
void launchReviewUrl() async {
  const url = 'https://your-app-review-url.com'; // Замените на реальную ссылку
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Не удалось открыть $url';
  }
}

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

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

Запуск анимации при изменении свойства
Привет, подписчики! 👋 Сегодня мы рассмотрим интересный вопрос: как запустить анимацию каждый раз, когда меняется определенное свойство? 🤔

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

Для этого мы можем использовать метод didUpdateWidget в StatefulWidget. Этот метод вызывается каждый раз, когда виджет обновляется. 🔄

Пример кода:

@override
void didUpdateWidget(covariant UploadedAvatarAnimation oldWidget) {
  super.didUpdateWidget(oldWidget);
  final (wasUploading, isUploading) = (oldWidget.isUploading, widget.isUploading);
  switch ((wasUploading, isUploading)) {
    case (false, true):
      _controller.forward(from: 0);
      _initScaleAnim(0, pt);
    case (true, false):
      _controller.reverse(from: 1);
    default:
  }
}

В этом примере мы проверяем, изменилось ли свойство isUploading, и запускаем анимацию соответствующим образом. 🔮

Как это работает?
1. Мы используем метод didUpdateWidget, чтобы отслеживать изменения виджета.
2. Мы сравниваем старое и новое значения свойства isUploading.
3. В зависимости от изменения, мы запускаем анимацию вперед или назад.

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips 👍
#flutter #dart #flutterpulse #FlutterPulseTips #mobiledev #appdev #animation #ui #ux #codingtips #programming #softwaredevelopment

Добавьте кастомные переходы страниц с GoRouter

Переходы между страницами важны для пользовательского опыта

Добавьте этот небольшой помощник, чтобы определить кастомный переход страницы:

Page<dynamic> Function(BuildContext, GoRouterState) buildPageTransition(
  Widget child,
) => (BuildContext context, GoRouterState state) {
  return CustomTransitionPage(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
        FadeThroughTransition( // можно создать свой собственный переход или использовать из пакета animations на pub.dev
          animation: animation,
          secondaryAnimation: secondaryAnimation,
          child: child,
        ),
  );
};

Теперь оберните свою страницу в переход, используя pageBuilder для вашего маршрута:

GoRoute(
  path: '/signin',
  builder: (context, state) => const SigninPage(),
  pageBuilder: buildPageTransition(const SigninPage()),
),

Вы также можете настроить стандартный переход страницы прямо в вашей теме:

pageTransitionsTheme: PageTransitionsTheme(
  builders: {
    TargetPlatform.android: const ZoomPageTransitionsBuilder(),
    TargetPlatform.iOS: const CupertinoPageTransitionsBuilder(),
  },
),

Оцените нашу новую рубрику! 👍💡
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppDev #UIUX #FlutterTips

Принудительный портретный режим
Когда вы в последний раз использовали приложение в ландшафтном режиме? 🤔

Фиксация ориентации экрана в Flutter
Чтобы заставить приложение работать только в портретном режиме, добавьте следующий код в функцию main() перед запуском приложения:

SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp, // Портретная ориентация вверх
  DeviceOrientation.portraitDown, // Портретная ориентация вниз
]);

Теперь приложение не сможет перейти в ландшафтный режим 📱💻

Результат:
Приложение останется в портретном режиме 👍

Оцените нашу новую рубрику FlutterPulseTips! 👍 Ваши отзывы помогут нам улучшать контент. 💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppDev #ProgrammingTips #UIUX #DevTips

Загрузка байтов изображения и отображение на холсте
Не так сложно сделать с помощью Flutter 😉

Вы когда-нибудь задумывались, как можно загрузить изображение и отобразить его на холсте в Flutter? 🤔 Давайте разберемся в этом вместе! 💡

Шаг 1: Загрузка изображения
Сначала нам нужно загрузить изображение из наших ресурсов. Для этого мы используем метод load класса rootBundle:

import 'dart:ui' as ui;
import 'package:flutter/services.dart';

// Загружаем изображение из ресурсов
final ByteData data = await rootBundle.load(path);
// Преобразуем в Uint8List
final Uint8List bytes = data.buffer.asUint8List();
// Преобразуем в ui.Image
final ui.Image image = await decodeImageFromList(bytes);

Шаг 2: Отображение на холсте
Теперь, когда у нас есть изображение в формате ui.Image, мы можем отобразить его на холсте. Для этого создадим собственный класс CustomPainter:

// Создаем новый CustomPainter
class MyPainter extends CustomPainter {
  final ui.Image image;

  MyPainter(this.image);

  @override
  void paint(Canvas canvas, Size size) {
    // Рисуем изображение на холсте
    canvas.drawImageRect(image, srcRect, dstRect, Paint());
  }
}

Вот и все! Теперь вы знаете, как загрузить байты изображения и отобразить их на холсте во Flutter. Просто и эффективно, не правда ли? 😊

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #mobiledev #appdev #codingtips #FlutterTips

Хранение настроек пользователя

Используйте плагин shared preferences только для некритичных данных!

Почему не стоит хранить всё в SharedPreferences:
• Shared preferences предназначены для хранения простых данных в формате ключ-значение.
• Они не подходят для хранения сложных структур данных.
• Они не оптимизированы для высокопроизводительных операций чтения/записи.
• Не храните конфиденциальные данные, так как нет гарантии, что запись будет сохранена на диске (иногда всё может быть потеряно).


// getInstance возвращает Future
// Хорошей практикой является инициализация в начале работы приложения,
// а затем использование уже инициализированного экземпляра
final SharedPreferences prefs = await SharedPreferences.getInstance();


Если вы используете Provider или Riverpod, рассмотрите возможность сделать следующее:
вызовите метод init перед отображением чего-либо и используйте SharedPreferencesBuilder
для доступа к sharedPreferences.


import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';

final sharedPreferencesProvider = Provider<SharedPreferencesBuilder>((ref) => SharedPreferencesBuilder(),
);

class SharedPreferencesBuilder implements OnStartService {
SharedPreferences? _sharedPreferences;

@override
Future<void> init() async {
if (_sharedPreferences != null) {
return;
}
_sharedPreferences = await SharedPreferences.getInstance();
}

SharedPreferences get prefs {
if (_sharedPreferences == null) {
throw Exception('SharedPreferences not loaded');
}
return _sharedPreferences!;
}
}


Prefer SharedPreferencesAsync or SharedPreferencesWithCache,
так как SharedPreferences будет объявлен устаревшим в будущих обновлениях.

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppDev #ProgrammingTips #DevTips

Детали для улучшения формы

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


final _formKey = GlobalKey<FormState>();

class SigninPage extends StatelessWidget {
const SigninPage({super.key, this.canDismiss = true});

@override
Widget build(BuildContext context) {
final translations = Translations.of(context).signin;

return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(), // Убираем фокус с полей при нажатии вне их
child: PopScope(
canPop: canDismiss,
child: TopImgBackground(
bgImagePath: 'assets/images/signin/signin_background.png',
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
automaticallyImplyLeading: canDismiss,
foregroundColor: context.colors.background,
),
resizeToAvoidBottomInset: false,
body: Form(
autovalidateMode: AutovalidateMode.disabled,
key: _formKey,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: ListView(
children: [
const SizedBox(height: 150),
Text(
translations.title,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
),
);
}
}


Решение: Оберните всю страницу в GestureDetector, а затем снимите фокус со всех элементов, используя функцию FocusScope. Это позволит автоматически убрать клавиатуру при нажатии вне текстовых полей.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #AppDev #CodingTips #DevTips #FlutterTips

Supabase: Привязка анонимного пользователя к аутентифицированному

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

@override
Future<Credentials> signup(String email, String password) async {
  if (client.auth.currentUser?.isAnonymous == true) {
    // Обновляем анонимного пользователя с помощью email и password
    final res = await client.auth.updateUser(UserAttributes(email: email, password: password));
    if (res.user != null) {
      return Credentials(id: res.user!.id);
    } else {
      throw 'Ошибка при обновлении пользователя';
    }
  }
  return client.auth
      .signUp(email: email, password: password)
      .then(
        (value) => Credentials(id: value.user!.id),
        onError: (error) {
          Logger().e("Ошибка при регистрации: $error");
          throw SignupException();
        },
      );
}

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Supabase #MobileDev #AppDev #CodingTips #DevTips

Flutter-дайджест сентября 🌐

Сентябрь выдался ярким месяцем для Flutter-разработчиков: статьи на Хабре, новые пакеты и мощные обновления, разборы на YouTube и полезные советы для прокачки проектов 🚀

В дайджесте вы найдёте:

🎓 статьи с Хабра (RenderObject, CI/CD, хитрости релиза в сторы);
🎥 лучшие видео (FFI + Rust, Talker, сборка бинарников);
📦 топовые пакеты месяца (flutter_slidable, go_router, drift, flutter_map, Firebase и др.);
🆕 новые пакеты недели (bodychart_heatmap, fquery, isar_plus, loader_pro, cupertino_native);
💡 #FlutterPulseTips (кастомные переходы страниц, точный таймер, лайфхаки с формами).

Полный обзор читайте 👉 здесь

Давайте вместе вспомним что произошло за прошедший месяц

#Flutter #Dart #FlutterPulse #PubDev #Хабр #MobileDev

Что такое Render Objects?

Render Objects являются основой визуальной системы Flutter. Они используются для отрисовки элементов интерфейса на экране.

Flutter строит пользовательские интерфейсы в три слоя:
1. Widget: конфигурация визуального элемента
2. Element: соединяет виджеты и объекты рендеринга
3. RenderObject: рисует на вашем экране

Настройка RenderObject
Поскольку мы будем рендерить одного потомка, мы расширяем SingleChildRenderObjectWidget.

Render Objects рисуют как CustomPainter, но с гораздо большими возможностями:
- Могут иметь потомков и реагировать на ограничения макета
- Управляют как макетом, так и отрисовкой
- Обрабатывают ограничения макета
- Управляют своим собственным размером

Зачем использовать RenderObject?
Большую часть времени вам не придётся писать RenderObjects самостоятельно. Используйте виджеты!
Но пользовательские RenderObjects дают неограниченную творческую свободу для нестандартных виджетов.

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: CustomStar(
          size: 200,
          color: Colors.amber,
        ),
      ),
    );
  }
}

class CustomStar extends SingleChildRenderObjectWidget {
  final double size;
  final Color color;

  const CustomStar({
    super.key,
    required this.size,
    required this.color,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCustomStar(size: size, color: color);
  }

  @override
  void updateRenderObject(BuildContext context, RenderCustomStar renderObject) {
    renderObject.starSize = size;
    renderObject.color = color;
  }
}

class RenderCustomStar extends RenderBox {
  RenderCustomStar({
    required double size,
    required Color color,
  })  : starSize = size,
        color = color;

  double starSize;
  Color color;

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    canvas.save();
    canvas.translate(offset.dx, offset.dy);
    // ... рисуйте то, что вам нужно здесь
  }
}

Оцените новую рубрику лайком! 👍
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #mobiledev #renderobjects #flutterrenderobjects #flutterui #flutterdevelopment #codingtips