Flutter Pulse
1.02K subscribers
626 photos
1 file
1.75K links
На канале будут новости про flutter с сайтов, информация об обновлении пакетов, а также авторский контент.
Download Telegram
Управление переменными окружения в Flutter Web: секреты и лайфхаки
Flutter-разработчики, внимание! Хотите узнать, как эффективно управлять переменными окружения в своих Flutter Web-приложениях?

В этой статье вы найдёте подробное руководство по использованию переменных окружения в Flutter Web. Автор делится гибридной стратегией, которая включает использование flutter_dotenv для локальной разработки и dart-define для деплоя. Вы узнаете, как настроить VS Code для лёгкого переключения между окружениями, как создать отдельные файлы для переменных окружения и как интегрировать их в свой проект.

В статье описаны следующие приёмы:
Использование flutter_dotenv для локальной разработки и dart-define для деплоя;
Создание отдельных файлов для переменных окружения (.env.dev, .env.uat, .env.prod);
Настройка VS Code для лёгкого переключения между окружениями;
Использование dart-define для передачи значений переменных окружения при деплое.

🇷🇺Читать статью на русском
🇬🇧Читать статью на английском
🌐Оригинальная статья

Все подобные новости ищите по хэштегу #FlutterPulseMedium Оцените новую рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #webdevelopment #environmentvariables #devops #mobiledevelopment
👍1
🚫 Перестаньте использовать MediaQuery для адаптивности в Flutter
В 2025 году пора пересмотреть подход к созданию адаптивных интерфейсов во Flutter! Если вы всё ещё используете MediaQuery для responsive design, то пришло время изменить свой подход.

В статье рассматривается, почему использование MediaQuery для адаптивности является устаревшим и неэффективным подходом, особенно при разработке для различных устройств, таких как мобильные телефоны, веб, планшеты и складные устройства. Вы узнаете о новых инструментах и приёмах, которые предлагает Flutter для создания по-настоящему адаптивных интерфейсов.

В частности, в статье обсуждаются такие темы, как:
- Почему дробное масштабирование (fractional sizing) не подходит для создания адаптивных интерфейсов.
- Как использовать LayoutBuilder для создания адаптивных интерфейсов, основанных на доступном пространстве.
- Как использовать встроенные точки останова (breakpoints) во Flutter и пакеты, такие как flutter_responsive_framework.
- Как создавать адаптивные интерфейсы, которые не только масштабируются, но и меняют свою структуру в зависимости от устройства.

Читайте полную статью по ссылкам ниже:
🇷🇺Читать на русском языке
🇬🇧Читать на английском языке
🌐Оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Оцените новую рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #responsiveDesign #adaptiveUI #mobileDevelopment #webDevelopment #FlutterDev #programmingTips
👍2💩1
Создание действительно кроссплатформенных Flutter-приложений: секреты и советы

Flutter уже давно стал популярным инструментом для разработки мобильных приложений, но его возможности не ограничиваются только Android и iOS! В этой статье вы узнаете, как создать приложение, которое будет работать на Windows, macOS и в вебе, и при этом будет выглядеть и работать как родное.

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

🇷🇺 Читать статью на русском
🇬🇧 Read the article in English
🌐 Читать оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Оцените рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #crossplatform #mobiledevelopment #webdevelopment #desktopapplication
Полное руководство по созданию push-уведомлений для Flutter Web
Хотите отправлять push-уведомления в своё Flutter Web-приложение? Теперь это возможно с помощью Firebase Cloud Messaging и service workers!
В этой статье вы найдёте подробное руководство по интеграции push-уведомлений в ваше Flutter Web-приложение. Вы узнаете, как настроить Firebase, добавить service workers, запрашивать разрешения на уведомления и отправлять тестовые уведомления.

В статье описаны все необходимые шаги: от добавления Firebase в проект до настройки service workers и отображения кастомных уведомлений. Вы также найдёте советы по тестированию и отладке уведомлений.

Ссылки на полное руководство:
🇷🇺Русская версия
🇬🇧English version
🌐Оригинальная статья

Все подобные новости ищите по хэштегу #FlutterPulseMedium Оцените новую рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #pushnotifications #FirebaseCloudMessaging #serviceworkers #webdevelopment
Принудительный однократный вход в приложение Flutter: автоматическое завершение сеанса при закрытии приложения

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

В этой статье рассматривается проблема одновременных сеансов, сложности с жизненным циклом приложения на мобильных устройствах и в веб-версии, а также реализация очистки сеанса при завершении работы приложения с помощью платформо-зависимых подходов для Android и Flutter Web. Вы узнаете, как обнаружить завершение работы приложения, как использовать Foreground Service на Android и sendBeacon на Flutter Web для удаления сеанса пользователя при закрытии приложения.

🇷🇺Читать статью на русском
🇬🇧Read the article in English
🌐Original article

Все подобные новости ищите по хэштегу #FlutterPulseMedium Напишите, понравилась ли вам новая рубрика!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #mobiledevelopment #webdevelopment #sessionmanagement #appsecurity
Создание действительно кроссплатформенных Flutter-приложений: секреты мастерства для настольных и веб-приложений

Flutter уже давно завоевал популярность среди разработчиков мобильных приложений, но его возможности далеко выходят за рамки Android и iOS! В этой статье вы узнаете, как создавать приложения, которые работают безупречно на Windows, macOS и веб-платформах.

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

🇷🇺 Читать статью на русском
🇬🇧 Read the article in English
🌐 Читать оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Оцените рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #crossplatform #mobiledevelopment #webdevelopment #desktopapplications
Flutter встречает WebAssembly (Wasm): разблокировка будущего высокопроизводительных приложений

Представьте себе Flutter-приложения, работающие в браузерах с производительностью, близкой к native, без использования медленных JavaScript-мостов! Это становится возможным благодаря интеграции Flutter с WebAssembly (Wasm).

В этой статье рассматривается, как WebAssembly революционизирует разработку Flutter-приложений, обеспечивая высокую производительность, гладкую отрисовку и возможность выполнения задач, ранее считавшихся невозможными в веб-приложениях, таких как AI-инференс, игровые движки, симуляции в реальном времени и продвинутая визуализация данных. Вы узнаете о преимуществах и вызовах, связанных с использованием Flutter и Wasm, а также о лучших практиках для их эффективного сочетания.

🇷🇺 Читать статью на русском
🇬🇧 Read the article in English
🌐 Читать оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Напишите, чтобы подписчики оценили рубрику.

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #WebAssembly #Wasm #crossplatform #highperformance #mobiledevelopment #webdevelopment
👍5
Flutter на вебе: один фреймворк для всех платформ?

Flutter продолжает завоевывать мир веб-разработки! Но насколько он готов заменить другие фреймворки и технологии для создания кросс-платформенных приложений?

Основная часть статьи посвящена анализу возможностей Flutter на вебе, включая производительность, SEO, доступность и опыт разработки. Автор рассматривает различные аспекты, такие как выбор рендерера (HTML или CanvasKit), маршрутизация, адаптивность и поддержка PWA. Отдельное внимание уделяется доступности и SEO, а также особенностям разработки для desktop-платформ.

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

🇷🇺 Читать статью на русском
🇬🇧 Read the article in English
🌐 Читать оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Напишите, чтобы подписчики оценили рубрику.

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterweb #FlutterPulseMedium #flutterdev #crossplatform #webdevelopment #mobiledevelopment #desktopdevelopment
Откройте для себя Jaspr: фреймворк для создания веб-приложений на Dart
🌐 В мире веб-разработки появился новый игрок - Jaspr, фреймворк, который позволяет использовать язык Dart для создания веб-приложений. Jaspr отличается от других фреймворков, таких как Flutter Web, тем, что он не использует канвас и пиксельную магию, а вместо этого работает с обычным HTML и CSS. Это позволяет получить лучшую производительность и SEO, а также использовать существующие CSS-библиотеки и JavaScript-библиотеки.

📈 Jaspr поддерживает различные режимы работы, включая статическую генерацию сайтов (SSG), рендеринг на стороне сервера (SSR) и клиент-сайд рендеринг (SPA). Фреймворк также предоставляет автоматическую гидратацию, которая позволяет превратить статический сайт в интерактивное SPA без перезагрузки. Синтаксис Jaspr похож на синтаксис Flutter, поэтому разработчикам, знакомым с Flutter, не потребуется значительного переобучения.

🔍 Jaspr имеет несколько ключевых особенностей, таких как возвращаемый тип Iterable<Component>, который позволяет вернуть несколько компонентов на одном уровне, использование HTML-тегов вместо виджетов и стилизация через CSS. Jaspr также поддерживает управление состоянием с помощью знакомых пакетов, таких как Riverpod и BLoC. Это позволяет разработчикам использовать привычные инструменты и не учить новые.

📚 Читать здесь: ссылка

👉 FlutterPulse — канал о мире Flutter!

🔥 #flutter #dart #flutterpulse #flutterpulsehabr #jaspr #webdevelopment #dartlang
Повышение производительности Flutter Web: секреты кеширования с Service Workers

🚀 Хотите сделать своё Flutter-web-приложение быстрым и отзывчивым? Одним из эффективных способов достижения этой цели является использование Service Workers для кеширования!

В этой статье вы узнаете, как работают Service Workers во Flutter Web, как кеширование улучшает производительность и как создать собственную стратегию кеширования. 🔍

Service Worker — это фоновый скрипт, который может перехватывать и управлять сетевыми запросами, кешировать файлы и обеспечивать работу приложения в оффлайн-режиме.
👉 Во Flutter Web Service Worker играет ключевую роль в ускорении загрузки приложения и обеспечении его работы без интернета.

⚙️ Flutter автоматически генерирует Service Worker при сборке web-версии приложения, но вы можете настроить его для улучшения производительности и реализации оффлайн-функциональности.

🔹 Основные преимущества кеширования во Flutter Web:
Быстрая загрузка файлов напрямую из кеша.
Работа приложения в оффлайн-режиме.
Сокращение потребления трафика.
Улучшение пользовательского опыта.

🛠 Вы также можете создать собственный Service Worker для кеширования основных активов, запросов к API и обеспечения оффлайн-функциональности.

📌 В статье подробно описаны различные стратегии кеширования, такие как "Кеш сначала", "Сеть сначала" и "Stale-While-Revalidate", и показано, как их можно использовать во Flutter Web.

🇷🇺 Читать статью на русском
🇬🇧 Read the article in English
🌐 Читать оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium Напишите, понравилась ли вам эта рубрика!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #webdev #pwa #performance #serviceworkers #caching #mobiledev #webdevelopment
🔥2
Создание строительного калькулятора "Мастерок" на Flutter и Next.js
Автор статьи рассказывает о своем опыте создания строительного калькулятора "Мастерок" на Flutter для RuStore 📈. Приложение получило высокую оценку пользователей, но автор понял, что многие люди ищут информацию в браузере, а не в магазине приложений 🤔. Поэтому он создал веб-версию калькулятора на Next.js 15, которая стала дополнением к приложению 📊.

Автор отмечает, что сайт и приложение должны быть единым целым, и пользователь имеет право ожидать, что на двух поверхностях цифры совпадут 📊. Он также рассказывает о проблемах, которые он встретил при создании веб-версии, и о том, как он их решил 🤔. Кроме того, автор делится своим опытом использования различных технологий, таких как Next.js, Tailwind, three.js и других 📚.

Автор статьи описывает свой подход к разработке калькулятора для строительных материалов 📈. Он использует единый источник истины в формате JSON, который содержит все необходимые коэффициенты и формулы для расчета 📊. Этот источник используется как в веб-версии калькулятора, так и в мобильном приложении 📱.

Читать здесь: ссылка


FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #flutterpulsehabr #nextjs #javascript #webdevelopment