Flutter Pulse
471 subscribers
290 photos
602 links
На канале будут новости про flutter с сайтов, информация об обновлении пакетов, а также авторский контент.
Download Telegram
AnimatedSwitcher с Riverpod: Анимируем текст при каждом изменении

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

Что такое AnimatedSwitcher?

AnimatedSwitcher(
// Виджет, который по умолчанию делает плавное переключение между новым виджетом и предыдущим
duration: const Duration(milliseconds: 250), // Продолжительность анимации
switchInCurve: Curves.easeInOut, // Кривая анимации при появлении
transitionBuilder: (Widget child, Animation<double> animation) {
// Строитель анимации перехода
return ScaleTransition(scale: animation, child: child);
},
child: Text(
'MyText', // Текст, который будет отображаться
key: Key('My-${state.value?.currentStepIndex}'), // Ключ, который запускает анимацию при изменении
style: TextStyle(fontSize: 24), // Стиль текста
),
)


Как это работает?
1. Мы используем AnimatedSwitcher для обёртки нашего текстового виджета.
2. Ключ (Key) играет решающую роль. Когда значение состояния меняется, ключ обновляется, запуская анимацию.
3. transitionBuilder позволяет настроить тип анимации. В примере используется ScaleTransition.



class SessionExerciceTitle extends ConsumerStatefulWidget {
const SessionExerciceTitle({super.key});

@override
ConsumerState<ConsumerStatefulWidget> createState() => _SessionExerciceTitleState();
}

class _SessionExerciceTitleState extends ConsumerState<SessionExerciceTitle> {
Key titleKey(AsyncValue<UserSessionState> state) =>
ValueKey<String?>("My-${state.value?.currentStepIndex}");

@override
Widget build(BuildContext context) {
final state = ref.watch(userSessionNotifierProvider); // Следим за изменениями состояния
return AnimatedSwitcher(
duration: const Duration(milliseconds: 250), // Продолжительность анимации
switchInCurve: Curves.easeInOut, // Кривая анимации при появлении
transitionBuilder: (Widget child, Animation<double> animation) {
// Строитель анимации перехода
return ScaleTransition(scale: animation, child: child);
},
child: Text(
state.value?.myText ?? '', // Отображаемый текст
key: titleKey(state), // Ключ, который запускает анимацию при изменении состояния
textAlign: TextAlign.center, // Выравнивание текста
),
);
}
}



Почему это полезно?
- Плавные переходы улучшают пользовательский опыт 🌟
- Легко реализуется с помощью Riverpod и AnimatedSwitcher 👍

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #Animation #RiverpodTips #FlutterTips
Автоматическое создание новой версии в Apple Store
Перестаньте тратить время на заполнение метаданных для каждого языка!

Когда это полезно?
Каждый раз, когда вы публикуете новую версию приложения в Apple Store Connect, вам приходится заполнять 2 поля для каждого языка. Но вы также можете использовать это для обновления других полей метаданных.

Шаги для автоматизации процесса:

1. Установите fastlane.
2. Инициализируйте fastlane в папке iOS вашего проекта:
fastlane init

3. Настройте учетные данные Apple Store Connect в файле Appfile:

app_identifier("app.your.app.id") # Идентификатор пакета вашего приложения
apple_id("your@email.com") # Ваша учетная запись Apple ID
team_id("TEAM_ID") # ID команды Apple Store Connect
itc_team_name("TEAM_NAME") # Имя команды в App Store Connect


4. Добавьте следующий код в файл Fastfile:

default_platform(:ios)

platform :ios do
desc "Скачать метаданные из App Store Connect"
lane :download_metadata do
# Код для скачивания метаданных
end

desc "Создать новую версию в App Store Connect"
lane :release_new_version do |options|
# Код для создания новой версии
deliver(
app_version: options[:version],
skip_binary_upload: true,
force: true,
submit_for_review: false,
automatic_release: false,
metadata_path: "fastlane/metadata",
release_notes: "fastlane/metadata/#{options[:version]}/release_notes.txt",
skip_screenshots: true
)
end
end


Использование:
1. Скачайте метаданные:
fastlane deliver download_metadata

2. Создайте новую версию с предварительно заполненными данными для всех языков:
fastlane release_new_version version:"3.12.3"


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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppStore #Fastlane #DevTips #ProductivityTips
🔥 Liquid Glass Renderer — эффект «жидкого стекла» теперь и во Flutter!

Новый пакет liquid_glass_renderer позволяет Flutter-разработчикам воссоздать визуальный стиль, вдохновлённый новым языком дизайна Apple — Liquid Glass, представленным на WWDC 2025 вместе с iOS 26, macOS Tahoe и другими платформами.

Что такое Liquid Glass?

Liquid Glass — это современный визуальный стиль с эффектами стеклянности, динамической прозрачности, глубины и плавного взаимодействия слоёв. Его основа — реалистичное поведение света и стекла в интерфейсах.

Теперь и во Flutter:

🧊 Эффект жидкого стекла: просто оберни любой виджет в LiquidGlass
🧬 Слои, которые сливаются между собой как настоящая жидкость
🎨 Гибкая настройка — толщина, цвет, освещение, блики, размытие
⚡️ Высокая производительность благодаря поддержке Impeller и шейдерам

Пример:

LiquidGlass(
shape: LiquidRoundedSuperellipse(
borderRadius: Radius.circular(50),
),
child: const SizedBox(
height: 200,
width: 200,
child: Center(child: FlutterLogo(size: 100)),
),
)


Важно:

Работает только на Impeller (поддержка Web, Windows, Linux — пока нет)

Поддерживается до 3 стеклянных фигур в одном LiquidGlassLayer

Установка:

flutter pub add liquid_glass_renderer


Импорт:

import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';


Оцените эффект Liquid Glass сами — теперь вы можете создавать интерфейсы нового уровня прямо во Flutter!

#flutter #dart #liquidglass #design #WWDC2025 #FlutterUI #FlutterEffects #MobileDev #AppDesign #flutterpulse
Использование ИИ в вашем приложении с помощью Gemini

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

Почему не стоит использовать плагин flutter_gemini?

Из соображений безопасности я настоятельно предпочитаю не раскрывать свой ключ API Gemini в приложении 🔑.

Шаги по интеграции Gemini с Firebase:

1. Создайте новый проект Firebase с помощью команды firebase init genkit или установите необходимые зависимости 📦.
- Установите следующие пакеты:
- @genkit-ai/ai
- @genkit-ai/core
- @genkit-ai/dotprompt
- @genkit-ai/firebase
- @genkit-ai/flow
- @genkit-ai/googleai
- zod

2. Установите genkit глобально: npm install -g genkit 🌐.

3. Инициализируйте gemini, используя configureGenkit 🔧.



import { initializeApp } from "firebase/app";
import { defineString } from "firebase-functions/params";
import { configureGenkit } from '@genkit-ai/core';
import { firebase } from '@genkit-ai/firebase';

defineString('GOOGLE_GENAI_API_KEY');
const firebaseApp = initializeApp();

configureGenkit({
plugins: [
firebase(),
googleAI({ apiKey: defineString('GOOGLE_GENAI_API_KEY') }),
],
// ...
enableTracingAndMetrics: true,
});



Добавьте ключ API в файл .env и не забудьте удалить .env из .gitignore, иначе Firebase не сможет его использовать 🚫.



export const suggestionFlow = onFlow({
name: "suggestionFlow",
httpsOptions: { cors: true },
region: "europe-west1",
inputSchema: z.object({ uid: z.string(), query: z.string(), language: z.string() }),
outputSchema: z.string(),
authPolicy: (auth, input) => {
// Проверка аутентификации пользователя
if (auth.uid != input.uid) {
throw new Error("You can only access your own data");
}
// Проверка поддерживаемого языка
if (input.language != "fr" && input.language != "en") {
throw new Error("Only French and English are supported for now");
}
// Разрешить доступ только аутентифицированным пользователям
return !!auth.uid;
},
}, async (input) => {
const exercicesContext = JSON.stringify(exercices);
const userLanguage = input.language;
const prompt = `You are an AI assistant that helps users with XXX. You will speak in the user's language: $userLanguage.
You will answer with the JSON format below:
{"days": [{"day": number, "steps": {...}, "description": string}]}
Here is the user query: ${input.query}`;

const llmResponse = await generate({
model: gemini15Flash,
prompt,
config: {
temperature: 1,
maxOutputTokens: 3000,
},
});

return llmResponse.text();
});



Разверните эту функцию на Firebase с помощью команды firebase deploy --only functions 🚀.

Вызов функции из Flutter:


Future<String> fetchStretchingSuggestionFlow(
String uid,
String query,
String userLanguage,
) async {
final callable = FirebaseFunctions.instance.httpsCallable('suggestionFlow');
final result = await callable.call<String>({
'uid': uid,
'query': query,
'language': userLanguage,
});
final data = (await decode(result.data)) as Map<String, dynamic>;
return AIexercice.fromJson(data);
}



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

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

#flutter #dart #flutterpulse #FlutterPulseTips #Firebase #Gemini #AI #FlutterTips #MobileDev #AppDev
🔧 DevScreen на Flutter: свой путь к инструменту для логирования, тестирования и смены окружений

🗣 Спикер: Павел, Flutter-разработчик с 10+ годами опыта, один из первых пользователей Flutter в РФ, соавтор книги «Основы Flutter», лектор СФУ и активный участник комьюнити.

На конференции он представил разработку своей команды — DevScreen, универсальный внутренний инструмент для мобильной отладки, логирования, диагностики и смены окружений.
🔎 Зачем нужен DevScreen?

В боевой разработке часто не хватает:

🎛 экрана с настройками (окружения, прокси)

🧾 доступа к логам прямо в приложении

🐞 удобного сбора стектрейсов для QA

📉 отладки UI, FPS, границ, состояния виджетов

🧪 триггера запуска debug-инструментов без пересборки

💬 «Качество — это ответственность всей команды», — говорит Павел. А значит, и тестировщики, и дизайнеры, и разработчики должны иметь доступ к полезной внутренней информации прямо в приложении.
🧰 Что уже есть на рынке?

Рассмотрели 2 популярных решения:
1. Ume

умеет логировать запросы
показывает FPS, границы виджетов, device info
не умеет работать с окружениями и прокси
нет нормального логирования ошибок
триггер ручной (нужно писать самому)

💡 Хорош для дизайнеров и UI-отладки, но слабо помогает QA и не масштабируется под все нужды.

2. Talker

готовый экран логов
отличное логирование (включая ошибки, кастомные события, API-запросы)
удобен и в приложении, и в консоли
не умеет менять окружение и прокси
триггер — тоже руками
нет UI-отладки

💬 «Talker — это скорее логер, чем полноценный DevScreen. Мы хотели большего».


Так родилась идея своего DevScreen MVP, который:
🔓 открывается по shake-жесту или скрытой зоне (не мешает пользователю)
🌐 позволяет менять окружения, добавлять прокси
🧾 логирует ошибки, API-запросы, аналитику и кастомные события
🔄 сбрасывает кэш, симулирует логаут, показывает device info
🛠 кастомизируется под проект, легко расширяется
🔐 имеет авторизацию (доступ по роли или логину)
🧪 отделён от боевого UI, не ломает UX обычного пользователя
⚙️ поддерживает показ границ виджетов, FPS, и другую системную инфу

💡 Всё настраивается модульно. Хочешь только прокси? Подключай только его. Нужны только логи? Без проблем.

🤝 Кто пользуется внутри?
Разработчики — смотрят логи, стектрейсы, ошибки
Тестировщики — не пишут баг на глаз, а прикладывают API-ответ и stacktrace
Дизайнеры — проверяют реализацию UI прямо в приложении (границы, цвета, размеры)

🚀 Что дальше?

В планах:
🧩 сделать DevScreen переиспользуемым пакетом
🛡 вынести доступ к нему за фичефлаг
🧪 покрыть всё юнит- и интеграционными тестами
📢 возможно — опубликовать в open-source, если будет спрос

📺 Полное видео доклада (YouTube):
📌 Такой подход реально экономит часы работы QA и разработчиков, а главное — повышает качество продукта уже на уровне debug. Всё прозрачно, логируемо и воспроизводимо.

🧵 #flutter #flutterpulse #debug #talker #devtools #qa #мобилкарф #тестирование #логирование #devscreen #mobiledev #dart #flutterмного #конференция
Проверка статуса продления подписки пользователя

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

Зачем проверять статус продления подписки?

Проверка статуса продления подписки позволяет вам:
Показывать промо-офферы перед тем, как потерять пользователя
Управлять доступом к premium-функциям вашего приложения

Пример кода на Dart:


Future<bool> hasRenewal() async {
final customerInfo = await Purchases.getCustomerInfo();
final entitlements = customerInfo.entitlements.active.values.firstOrNull;
return entitlements?.willRenew ?? false;
}


В этом коде мы:
1. Получаем информацию о покупателе с помощью `Purchases.getCustomerInfo()`
2. Извлекаем активные права доступа (`entitlements`)
3. Проверяем, будет ли подписка продлена (`willRenew`)

Используйте эту информацию, чтобы улучшить удержание пользователей! 📊

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #SubscriptionManagement #RevenueCat #FlutterTips
Обработка ошибок с Future
Catch them all 🎯

Неправильная функция

Future<void> functionInError() async {
throw "I am failing"; // Выбрасываем ошибку
}


Неправильный способ обработки

functionInError()
.catchError((err) => print("error catched")) // Перехватываем ошибку
.then(
(value) => print("success"), // Успешное выполнение
onError: (err) => print("I failed"), // Обработка ошибки
);

// Результат:
// error catched
// success


catchError перехватывает ошибку, но не возвращает её. Поэтому then выведет success вместо "I failed".

Правильный способ обработки

functionInError()
.catchError((err) {
print("error catched"); // Печатаем сообщение об ошибке
throw err; // Пробрасываем ошибку дальше
})
.then(
(value) => print("success"), // Успешное выполнение
onError: (err) => print("I failed"), // Обработка ошибки
);

// Результат:
// error catched
// I failed


Лучше обрабатывать ошибки в колбэке onError. Но если хотите цеплять функции друг за другом, не забудьте пробросить ошибку дальше.

Цепочка нескольких Future и обработка ошибок

void main() {
functionInError()
.then((res) => workingFuture()) // Продолжаем цепочку
.then((res) => print("ended")) // Завершаем цепочку
.onError((err) => print("error catched")); // Обрабатываем ошибку
}

Future<void> functionInError() async {
throw "I am failing"; // Выбрасываем ошибку
}

Future<void> workingFuture() async {
print("working future"); // Печатаем сообщение о работе
}

// Результат:
// error catched


Ошибка передаётся в последний onError.

Или обработка ошибок через try-catch с await

main() async {
try {
await functionInError(); // Ждём завершения функции
} catch (err) {
print("I failed"); // Обрабатываем ошибку
}
}


Оцените новую рубрику! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Future #ErrorHandling #FlutterTips #MobileDev #CodingTips
Отслеживание видимости клавиатуры
Без каких-либо плагинов 😉

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

Проблема:
Иногда клавиатура заставляет некоторые элементы контента перемещаться вверх, и вы можете захотеть скрыть определенные элементы на экране, когда пользователь печатает. Я предпочитаю иметь статическую кнопку действия внизу. Однако проблема в том, что эта кнопка может перекрывать поле ввода, пока пользователь печатает. Поэтому я использую метод, чтобы скрыть кнопку действия, когда клавиатура открыта.

Решение:
Для отслеживания состояния клавиатуры мы можем использовать виджет KeyboardVisibility, который не требует установки дополнительных плагинов.



import 'package:flutter/material.dart';

// состояние клавиатуры
enum KeyboardVisibilityState { visible, hidden }

// определение функции слушателя
typedef OnKeyboardStateChanged = void Function(KeyboardVisibilityState state);

// stateful виджет для отслеживания изменения видимости клавиатуры
class KeyboardVisibility extends StatefulWidget {
final Widget child;
final OnKeyboardStateChanged onKeyboardStateChanged;

const KeyboardVisibility({
super.key,
required this.child,
required this.onKeyboardStateChanged,
});

@override
State<KeyboardVisibility> createState() => _KeyboardVisibilityState();
}

class _KeyboardVisibilityState extends State<KeyboardVisibility> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}

@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}

@override
void didChangeMetrics() {
super.didChangeMetrics();
checkState();
}

void checkState() {
final value = WidgetsBinding.instance.platformDispatcher.views.first.viewInsets.bottom;
switch (value != 0.0) {
case true:
widget.onKeyboardStateChanged(KeyboardVisibilityState.visible);
case false:
widget.onKeyboardStateChanged(KeyboardVisibilityState.hidden);
}
}

@override
Widget build(BuildContext context) {
return widget.child;
}
}



Использование:
Виджет KeyboardVisibility можно использовать следующим образом:



KeyboardVisibility(
onKeyboardStateChanged: (state) => _showOrHideBottomAction(state),
child: Form(...),
)



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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #CodingTips #AppDev #DevTips
Создание изображения из виджета

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

Шаг 1: Добавьте RepaintBoundary поверх виджета, который хотите экспортировать

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



final GlobalKey _repaintBoundaryKey = GlobalKey();

RepaintBoundary(
key: _repaintBoundaryKey,
child: CustomPaint(
painter: MyPainter(),
...
),
)



Этот ключ позволит нам найти объект рендеринга и вызвать метод toImage. 📚 Для более глубокого понимания можно изучить, что такое Widget tree, Element tree и RenderObject tree.

Шаг 2: Вызовите метод для экспорта изображения в галерею телефона

Теперь напишем функцию, которая будет экспортировать изображение:



import 'package:image_gallery_saver/image_gallery_saver.dart';

Future<void> exportImage() async {
try {
RenderRepaintBoundary boundary = _repaintBoundaryKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();

final directory = await getDownloadsDirectory();
final imgName = 'myapp-${DateTime.now().microsecondsSinceEpoch}';
final result = await ImageGallerySaver.saveImage(pngBytes, quality: 100, name: imgName);

if (result['isSuccess']) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Изображение экспортировано')),
);
}
} catch (e) {
// Обработайте ошибку (покажите сообщение пользователю, сохраните отчет о сбое)
}
}



Мы используем пакет image_gallery_saver, чтобы сохранить изображение в галерею телефона. 📁📸

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #AppDev #CodingTips #UIUX #FlutterTips
Приостановка потока, когда нет подписчиков

Не теряйте события, когда некому их слушать 😉

В Flutter и Dart при работе с потоками (Stream) важно уметь правильно управлять подпиской и событиями. Один из полезных советов - приостанавливать поток, когда нет подписчиков, чтобы не терять важные события.

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



// Этот класс отвечает за рассылку уведомлений приложению
// Он также отвечает за прослушивание уведомлений
class AppEventsDispatcher {
final StreamController<AppEvent> _controller;
late final Stream<AppEvent?> _stream;

Stream<AppEvent?> get stream => _stream;

final List<AppEvent> _onNotificationEventsSubscriber;

AppEventsDispatcher()
: _onNotificationEventsSubscriber = [],
_controller = StreamController() {
_stream = _controller.stream.asBroadcastStream(
onCancel: (c) => c.pause(),
onListen: (el) {
if (el.isPaused) {
el.resume();
}
},
);
}

void dispose() {
_onNotificationEventsSubscriber.clear();
_controller.close();
}

void publish(AppEvent event) {
_controller.add(event);
}
}

final dispatcher = AppEventsDispatcher();
// Публикуем событие
dispatcher.publish(AppEvent('Новое уведомление'));
// Ждём немного
await Future.delayed(Duration(seconds: 1));
// Подписываемся на поток
final subscription = dispatcher.stream.listen((event) {
print('Получено событие: $event');
// так как мы приостановили поток, мы получим события
});



В этом примере мы создаём класс AppEventsDispatcher, который управляет потоком событий AppEvent. Когда нет подписчиков, поток приостанавливается, а при появлении нового подписчика - возобновляется с последнего события.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #StreamManagement #AppDevelopment #CodingTips
Canvas с GestureDetector: обработка событий только в пределах радиуса

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

Вы когда-нибудь сталкивались с ситуацией, когда ваш CustomPaint должен реагировать на жесты только в определенной области? Например, вам нужно, чтобы нажатие обрабатывалось только если оно произошло в пределах определенного радиуса вокруг объекта? 🔍

Для этого можно использовать метод hitTest в вашем CustomPainter. Вот пример кода:


class WorldPainter extends CustomPainter {
...
bool hitTest(Offset position) {
// вычисляем расстояние от позиции до нужной точки
var distance = position.distanceTo(this.location);
// возвращаем true, если расстояние меньше радиуса обнаружения
return distance < detectionRadius;
}
...
}



Затем оберните ваш CustomPaint в GestureDetector:


class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => print("do what you want"), // действие при нажатии
child: CustomPaint(
size: Size.infinite, // размер canvas
painter: WorldPainter(), // ваш кастомный painter
),
);
}
}



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

Оцените нашу новую рубрику и оставьте свои комментарии! 💬 Все подобные новости вы можете найти по хэштегу #FlutterPulseTips. 👉 #flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #FlutterTips #CodingTips #AppDevelopment