Flutter Friendly
808 subscribers
132 photos
57 videos
1 file
120 links
Канал Friflex о разработке на Flutter. Обновления, плагины, полезные материалы — превращаем знания в реальный опыт, доступный каждому разработчику.

🔗 Наш канал для разработчиков: @friflex_dev
🔗 Канал о продуктовой разработке: @friflex_product
Download Telegram
К нам едет ревизор, или как пройти проверку на защиту критических данных в приложении на Flutter

Анна, Flutter Team Lead Friflex, в этой статье разобрала 7 основных вещей, которые больше всего волнуют аудиторов.

🔸Можно ли запустить приложение в небезопасной среде — на root/jailbreak устройствах и на эмуляторах?
🔸Какие библиотеки внедряются в проект?
🔸В каком виде и где хранятся критические данные?
🔸Какие разрешения запрашивает приложение?
🔸Доступно ли превью страницы с чувствительными данными в фоновом режиме?
🔸Доступен ли запуск приложения, установленного из недоверенного источника?
🔸Актуальна ли версия Flutter?

Теперь вы на шаг ближе к прохождению аудита.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥54🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Привет, это Катя, Flutter Dev Friflex. Сегодня расскажу, как пользоваться режимом выбора виджетов (Select Widget Mode) из Flutter Inspector. А еще обсудим кнопку сброса выбранного виджета, о которой, как показала практика, не все знают.

Flutter Inspector — это инструмент, встроенный в Flutter DevTools, который позволяет разработчикам анализировать и отлаживать пользовательский интерфейс. С его помощью можно:
🔴видеть иерархию виджетов
🔴проверять размеры и отступы
🔴изменять свойства виджетов в реальном времени

Что такое Select Widget Mode?
Select Widget Mode (SWM) — это режим, который позволяет вам выбирать виджеты в вашем приложении, чтобы увидеть их свойства и структуру.

Чтобы активировать этот режим:
1️⃣ Запустите ваше приложение
2️⃣ Откройте DevTools
3️⃣ Выберите вкладку Flutter Inspector
4️⃣ Нажмите на кнопку «Select Widget Mode» (в левом верхнем углу)

Как использовать SWM?
Достаточно нажать на любой виджет в приложении, чтобы увидеть его свойства, которые можно изменить. Это ускоряет процесс разработки и тестирования в реальном времени. 

Пример исправления отступов:
Объявляю контейнер с паддингом 20 со всех сторон:
Container(
Text:  padding: EdgeInsets.all(20.0),
  child: Text('Привет, Flutter Friendly!'),
)


Мне нужно убрать вертикальный паддинг и посмотреть, как это будет выглядеть. Для этого использую SWM, выбираю контейнер и изменяю отступ в реальном времени на:

EdgeInsets.symmetric(horizontal: 20.0)


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

Документацию по DevTools можно посмотреть здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥42
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! Это Анна, Friflex Flutter Team Lead.

Уже знаете про новость, которая потрясла мировое Flutter-сообщество? Разработка макросов, которых все так долго ждали, прекращается.

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

Но команда Dart заявила, что текущая реализация макросов слишком увеличивает время компиляции проекта. Это оказало негативное влияние на процесс hot reload и на удобство разработки в целом.

Что дальше?
Команда Dart выделила три основных направления развития:
- улучшения процесса сериализации и десериализации данных
- развитие augmentations
- улучшения работы build_runner

Подробнее ознакомиться с деталями можно в статье, а поделиться своими эмоциями — в комментариях.
👌— я так и знал(а)
🔥— я ждал(а)
🔥11👍53👌3🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥53
Forwarded from Friflex Dev
🎧Пятница, можно расслабиться, чтобы послушать плейлист для кодинга. Каждый трек тщательно отобран и проверен на себе нашим фронтенд-разработчиком Романом.

Плейлист будем дополнять, Делитесь в комментариях, под какие мелодии вам работается лучше всего.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥84💩3👍2
Привет, это Роза, Flutter Dev Friflex👋

Сегодня расскажу о пакете meta, который помогает сделать Dart-код более понятным, поддерживаемым и безопасным.

Что такое пакет meta

Пакет meta — это библиотека от команды Dart, которая предоставляет аннотации для добавления метаданных в ваш код. Эти аннотации:

🖱 Документируют код: помогают понять, как правильно использовать функции, классы или переменные
🖱 Подсвечивают ошибки: инструменты анализа, такие как dart analyze, используют аннотации для поиска проблем в коде
🖱 Улучшают читаемость: делают код понятнее для команды и проще в сопровождении

Основные аннотации пакета meta

🔴@immutable — указывает, что класс неизменяемый и все его поля должны быть final
🔴@protected — говорит, что метод или поле предназначено только для использования внутри класса или его подклассов
🔴@visibleForTesting — Помечает метод или поле как доступное только для тестов.
🔴@sealed — отмечает, что класс нельзя наследовать за пределами этого файла
🔴@mustCallSuper — обязывает вызывать метод суперкласса при переопределении

Расширенные аннотации пакета meta

🔴@experimental — помечает элемент как экспериментальный и подверженный изменениям
🔴@UseResult — указывает, что результат функции или метода должен быть использован
🔴@alwaysThrows — заставляет метод всегда выбрасывать исключение
🔴@doNotStore — значение не должно сохраняться или кэшироваться
🔴@internal — говорит, что элемент предназначен для внутреннего использования и не является частью публичного API

Как использовать аннотации


import 'package:meta/meta.dart';

@immutable
class User {
final String name;
final int age;

const User(this.name, this.age);
}


Достаточно добавить аннотацию перед объявлением класса, метода или поля, чтобы она начала работать.

Если хотите узнать больше, загляните в документацию пакета.

Используйте аннотации из meta, чтобы писать качественный и профессиональный код. А если есть вопросы или предложения, пишите в комментариях. Обсудим 🚀
Please open Telegram to view this post
VIEW IN TELEGRAM
14🔥10👍3
Привет, снова с вами Катя, Flutter Dev Friflex. Сегодня расскажу про бета-версию Android 16.

Контекст такой: Google запустила публичное тестирование Android 16, и теперь пользователи могут установить бета-версию через OTA-обновление.

Что нового в Android 16 Beta 1

🔴Live Updates. Новый тип уведомлений, созданный для отображения статуса текущих событий. Это аналог Live Activities в iOS. С помощью Live Updates можно в реальном времени отслеживать процесс доставки заказа или следующий поворот, не открывая приложение ресторана или навигатора.

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

🔴Обновления предиктивного жеста «Назад». Теперь поведение жеста возврата на предыдущий экран поддерживает и трехкнопочную навигацию. Удерживая кнопку «Назад», можно увидеть фрагмент предыдущего экрана.

🔴Совместимость с кодеком APV. Кодек Advanced Professional Video, разработанный Samsung, предназначен для записи и постобработки видео высокого качества.

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

📌Интересный факт: все экраны придется адаптировать под ландшафт, так как установка в портретной ориентации будет невозможна. Почему так? Смотрите здесь.

С какими устройствами совместима

С Android 16 Beta 1 совместимы смартфоны и планшеты серии Google Pixel: Pixel 6 и 6 Pro, Pixel 6a, Pixel 7 и 7 Pro, Pixel 7a, Pixel Fold, Pixel Tablet, Pixel 8 и 8 Pro, Pixel 8a, Pixel 9, 9 Pro, 9 Pro XL и 9 Pro Fold.

Как установить, и когда выйдет

Самый простой способ установки — зарегистрироваться в программе бета-тестирования. После установки бета-версии Android 16 вернуться к стабильной версии без сброса данных можно будет только после окончательного релиза Android 16. Говорят, стабильная версия выйдет в апреле-июне.

Подробнее читайте здесь.

🔥 — иду тестировать
☕️ — подожду стабильный релиз
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥95😱3🌚1
Привет! Это Анна, Friflex Flutter Team Lead. Сегодня расскажу о переменных окружения: как удобно и безопасно настроить их хранение и использование во Flutter-проектах.

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

🔴production — пользовательское окружение, берет реальные данные с бэкенда, в таком виде приложение попадет в сторы
🔴staging — окружение для тестирования взаимодействия с бэкендом, дает тестовые серверные данные и позволяет имитировать разные пользовательские сценарии
🔴development — окружение для внутренних процессов разработки, может управлять внутренними моковыми данными для тестирования логики работы приложения

В проектах с несколькими окружениями часто нужно подменять те или иные переменные динамически между prod, stage и dev. Именно для этого есть переменные оружения, которые стандартно хранятся в .env файлах.

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

❗️Файлы .env необходимо добавлять в .gitignore и никогда не загружать в репозитории.

env
|_ prod.env
|_ stage.env
|_ dev.env


В каждый из файлов необходимо добавить те данные, которые в проекте должны подменяться от окружения к окружению. У нас это будет baseUrl для запросов на сервер и ключ API для доступа к AppMetrica.

requestBaseUrl='https://base-url.ru/'
appMetricaApiKey='your_api_key'


Чтобы приложение могло использовать эти переменные, подключим библиотеку envied. Она не только даст доступ к данным переменных, но и поможет зашифровать их, хранить в формате неочевидных наборов целых чисел.

Такая безопасность — главное преимущество этого пакета: данные переменных не будут использоваться в приложении в явном виде. Это значит, что при реверс-инжиниринге и прочих механизмах извлечения данных программного кода получить к ним доступ будет значительно сложнее.

Чтобы приложение получило доступ к переменным создадим интерфейс конфигурации

abstract interface class AppConfigInterface {
abstract final String requestBaseUrl;
abstract final String appMetricaApiKey;
}


Для каждого из окружений добавим реализацию интерфейса конфигурации с аннотацией класса @Envied(). Аннотация требует пути к файлу, откуда будут извлечены переменные окружения.

Поля внутри класса помечаются аннотацией @EnviedField() — сюда можно передать параметры названия переменной, значения по умолчанию, необходимости офусцировать данные и другие данные.

@Envied(name: 'Prod', path: 'env/prod.env')
class AppConfigProd implements AppConfigInterface {
@override
@EnviedField(obfuscate: true)
String get appMetricaApiKey => _AppConfigProd.appMetricaApiKey;

@override
@EnviedField(obfuscate: true)
String get requestBaseUrl => _AppConfigProd.requestBaseUrl;
}


После запуска кодогенерации объекты с аннотацией получают свои значения из указанного по пути файла .env. Зашифрованные значения в приложении хранятся в файле app_config.g.dart.

Готово! Теперь вы можете внедрить объект конфигурации в DI приложения и безопасно использовать переменные окружения!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍135🔥2👌1😍1
Привет! Это Роза, Flutter Dev Friflex👋

Почти в каждом Flutter-приложении есть скроллящиеся списки. Если использовать их неправильно, могут возникнуть проблемы с производительностью. Сегодня расскажу, как сделать скролл плавным и эффективным. Начнем!

📌 Заменяй вложенные ListView и Column на CustomScrollView
Если у тебя сложная вложенная структура, CustomScrollView поможет избежать избыточных перестроений и повысит эффективность.

📌 Выбирай ListView.builder для длинных списков
В отличие от ListView, который создает все элементы сразу, ListView.builder рендерит только видимые элементы, что экономит память и ресурсы.

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

📌 Оптимизируй ListView с itemExtent или SliverFixedExtentList
Фиксированная высота элементов снижает нагрузку на систему прокрутки и делает ее более плавной.

📌 Избегай shrinkWrap в длинных списках
Он пересчитывает размеры всех элементов, что может замедлить рендеринг. Подробнее — в этом посте.

📌 Применяй NestedScrollView для SliverAppBar и TabBarView
Это позволит заголовку сворачиваться плавно и без рывков.

📌 Выбирай ReorderableListView вместо ListView для перетаскивания элементов
Он уже оптимизирован под такие сценарии и не требует сложной ручной обработки состояний.

📌 Добавляй AutomaticKeepAliveClientMixin для сохранения состояния элементов
Если в списке есть сложные элементы добавляй AutomaticKeepAliveClientMixin, чтобы Flutter не пересоздавал виджеты при прокрутке.

📌 Используй к ScrollablePositionedList для быстрой прокрутки к нужному элементу
Если нужно быстро прокручивать к определенному элементу, ScrollablePositionedList эффективнее, чем стандартный ListView.

📌 Пробуй ListView.separated вместо дополнительных Padding и Divider
Этот вариант более производительный, так как Flutter не создает ненужные виджеты для каждого элемента.

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

❗️Все эти советы зависят от контекста. Важно тестировать каждый случай.

А какие еще лайфхаки по прокрутке ты используешь? Пиши в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍12❤‍🔥4🤩1
Продаем мак и покупаем винду?

Привет, с вами опять Катя, Flutter Dev Friflex. Слышали уже, что Apple открыла исходный код Swift Build — нового мощного движка сборки? Говорят, скоро разработчики смогут собирать Flutter-приложения для iOS на Windows. Давайте разберемся, что такое Swift Build и как он повлияет на разработку кроссплатформенных приложений.

Что это такое
Swift Build — это инструмент, который упрощает процесс сборки приложений на Swift. Он позволяет разработчикам управлять зависимостями, компилировать код и настраивать различные параметры сборки. Открытие исходного кода Swift Build означает, что разработчики могут изучать, изменять и адаптировать его под свои нужды.

Основные возможности Swift Build
🔴Управление зависимостями: легкое добавление и обновление библиотек.

🔴Настройка сборки: гибкие настройки для различных конфигураций и платформ.

🔴Оптимизация сборки: ускорение процесса сборки за счет эффективного управления ресурсами.

Возможности, которые открывает Swift Build
🔴Сборка на Windows: если Swift Build станет доступным для Windows, разработчики смогут собирать iOS-приложения без Mac.

🔴Упрощение процесса разработки: это упростит рабочий процесс для разработчиков, которые предпочитают Windows, и снизит барьер для входа в разработку под iOS.

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

Реальность или мечта
Пока что сборка iOS-приложений на Windows остается скорее перспективой, чем реальностью. Несмотря на то, что Apple сделала Swift Build открытым, для полноценной сборки iOS-приложений все еще требуется Xcode, который доступен только на macOS.

Но сообщество активно обсуждает возможность адаптации Swift Build для работы на Windows, что может стать революцией в мире кроссплатформенной разработки.

🔥 — продаю мак
❤️ — люблю мак
Please open Telegram to view this post
VIEW IN TELEGRAM
24🔥15👍6
Всем привет! Это Анна, Friflex Flutter Team Lead. Сегодня делюсь с вами своим личным топ-5 самых полезных расширений для VSCode.

🔜 Flutter Widget Snippets
Сниппеты в VSCode — очень удобный инструмент для быстрого создания шаблонных и часто повторяющихся участков кода. Это расширение позволяет быстро создать большинство самых популярных виджетов во Flutter (например, Stateless/StatefulWidget, Layout).

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

🔜 bloc
Для тех, кто в своих Flutter проектах использует библиотеку bloc, это расширение может стать незаменимым помощником.
Оно предоставляет набор сниппетов, с которыми в коде проще и быстрее добавлять виджеты в UI, создавать сами блоки и кубиты, а еще управлять их методами.

Расширение добавляет возможность быстро оборачивать виджеты в другие виджеты библиотеки через контекстное меню, а также создавать целые директории с первично настроенными связями между классами Bloc, State и Event. Находка для тех, кто не любит тратить время на организацию файлов и классов в них!

🔜 Flutter Tree
Еще одно полезное расширение для продвинутых Flutter-разработчиков.
С его помощью удобно добавлять вложенность виджетов: не теряешь время на написание параметров, расстановку скобок.

Например, если вам нужно создать контейнер со строкой виджетов внутри, это можно сделать простой записью Container>Row[Expanded>Text,ElevatedButton>Text]. В конце нажимаете Enter, и Flutter Tree все делает за вас — на выходе получаете сформированное дерево по вашему запросу.

🔜 Code Spell Checker
Это расширение пригодится не только Flutter-разработчикам, но и всем, кто пользуется VSCode. Оно помогает проверять написание слов в вашем коде. Будь то документация или название объектов в коде, расширение подчеркнет те слова, которые написаны некорректно и предложит варианты замены. Если слово написано верно, его можно вынести в исключения как для конкретного проекта, так и для вашего пользователя в общем. Поддерживает огромное количество языков, в том числе и русский.

🔜 Commit Message Editor
Почти все серьезные проекты требуют вести историю изменений в репозитории согласно соглашению о коммитах. Каждый коммит должен не только осмысленно отражать суть изменений, но и фиксировать тип изменений, измененные файлы и их критичность.

Чтобы оформлять коммиты по этим правилам, рекомендую Commit Message Editor. Расширение позволяет оформить коммит с помощью формы. Когда вы ее заполните, текст сам отформатируется и подставится в строку сообщения коммита.
Please open Telegram to view this post
VIEW IN TELEGRAM
9🔥5👍2🤩1
Привет, это Роза, Flutter Dev Friflex! 👋  

В Flutter существует огромное количество виджетов для управления размерами. Давайте сделаем быстрый дайджест и пройдемся по некоторым из них. Поехали!

🔴FittedBox
— Автоматически подстраивает дочерний виджет под доступное пространство, сохраняя пропорции.  
— Если контент слишком большой, уменьшает его, чтобы всё поместилось.  

🔴OverflowBox
— Позволяет дочернему элементу выходить за пределы родительского контейнера.  
— Игнорирует ограничения родителя, давая больше свободы.  

🔴ConstrainedBox
— Задаёт минимальные или максимальные размеры для дочернего элемента.  
— Накладывает ограничения, даже если содержимое больше или меньше заданных параметров.  

🔴LimitedBox
— Ограничивает размеры элемента, но только если они не заданы явно.  
— Устанавливает максимальный размер, если дочерний элемент не ограничен другими условиями.  

🔴AspectRatio
— Сохраняет определённое соотношение сторон (например, 16:9).  
– Автоматически подстраивает размеры элемента, сохраняя пропорции.   

🔴UnconstrainedBox
— Убирает все ограничения по размеру для дочернего элемента.  
— Позволяет дочернему виджету занимать столько места, сколько ему нужно.  

🔴IntrinsicWidth / IntrinsicHeight
— Позволяет элементу занимать минимально возможное пространство.  
— Вычисляет минимальный размер, необходимый для отображения дочернего элемента.  

🔴Flex, Expanded и Flexible
— Адаптивно распределяет пространство в Row или Column.  
Expanded — заполняет всё доступное пространство.  
Flexible — занимает пространство по возможности, но не жёстко.  

🔴Align
— Позволяет расположить элемент внутри родителя (например, по центру или в углу).  
— Задает позицию элемента относительно родительского контейнера.  

🔴LayoutBuilder  
— Динамически определяет доступный размер и позволяет перестроить UI.  
— Полезно для адаптации интерфейса под разные размеры экранов.   

❗️Важно
Используйте эти виджеты с умом. Некоторые из них могут повлиять на производительность и рендеринг. Тестируйте каждый случай!

💬 Делитесь в комментариях, какие виджеты используете чаще всего. Там же бонусом полезная табличка.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1711🔥5
Привет, с вами Катя, Flutter Dev Friflex. 

Сегодня я расскажу о новом расширении в Visual Studio Code для Swift. 

🔴Цель обновления
Сделать возможной разработку Swift-приложений на всех платформах. Это позволит разработчикам создавать приложения на Swift без ограничений по операционной системе.

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

📎Ссылка на установку расширения.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥84👌2
This media is not supported in your browser
VIEW IN TELEGRAM
10🔥6
Сегодня #Friflex_team заряжает знаниями на FlutterConf:

🔸12:40 — Юрий (руководитель отдела разработки) и Анна (Flutter TeamLead) в докладе «Router во Flutter. Когда думал, что все легко» расскажут про концепцию декларативного роутера.
📍Зал 1

🔸15:50 — Flutter-разработчики Роза и Екатерина в докладе «Как не наступать на одни и те же грабли: систематизация ошибок в разработке на Flutter» поделятся, как систематизировать ошибки, с которыми часто сталкиваются разработчики и предложат подходы по их минимизации.
📍Зал 2

Если вы здесь, то приходите послушать наши доклады и пообщаться. Присоединиться можно и онлайн.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍54
Media is too big
VIEW IN TELEGRAM
Flutter или …

На FlutterConf пообщались с Анной, Flutter TeamLead в Friflex, и поставили ее перед непростым выбором.

Что ответила Анна🖱
Please open Telegram to view this post
VIEW IN TELEGRAM
15🔥11👍5🍓1
Привет! Это Роза, Flutter Dev Friflex! 👋

Открывая любое приложение, скорее всего вы там увидите одну или 2 иконки. Но откуда они, и как добавить свои кастомные иконки? В Flutter вы можете работать с иконками, используя три основных подхода: 

1️⃣ Иконки из шрифтов (Icon Fonts) — встроенные иконки, такие как Material Icons.
2️⃣ SVG-иконки — обработка с помощью пакета flutter_svg
3️⃣ Векторная графика — использование vector_graphics для более быстрого рендеринга.

Предлагаю сравнить эти варианты и рассмотреть, когда и где использовать каждый из них.

🔸Иконки из шрифтов (Icon Fonts)
Иконки из шрифтов — это символы в формате шрифтов, например, Material Icons:
Icon(Icons.home, size: 32, color: Colors.blue)


Можно использовать кастомные шрифты с иконками. Например, с помощью IcoMoon:

1. Генерируем файл .ttf с иконками.
2. Подключаем в pubspec.yaml:

flutter:
      fonts:
        - family: CustomIcons
          fonts:
            - asset: assets/fonts/CustomIcons.ttf


3. Используем:
    
const Text(
'\uE900',
style: TextStyle(fontFamily: 'CustomIcons', fontSize: 32),
),

    


🔸SVG-иконки с flutter_svg:
Для кастомных иконок в векторном формате используем пакет flutter_svg:
import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/home.svg',
  width: 32,
  height: 32,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)


🔸Векторная графика (Vector Graphics)
Для повышения производительности конвертируем SVG в формат vector_graphics. Он рендерится быстрее.

import 'package:vector_graphics/vector_graphics.dart';

VectorGraphic(
  assetName: 'assets/icons/home.vec',
  width: 32,
  height: 32,
)


Что выбрать?

Icon Fonts — для стандартных иконок с высокой производительностью.
Flutter SVG — для кастомных и анимированных иконок.
Vector Graphics — для максимальной скорости рендеринга.

Какой метод используете вы? Делитесь в комментариях! 🚀
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍85🤩1
Привет! С вами вновь Анна, Friflex Flutter Team Lead.

🛒Что делать, если в Flutter-приложение нужно добавить возможность покупок виртуальных товаров и услуг? Сегодня подробно разберемся с нюансами в трех самых популярных сторах — Google Play, AppStore и RuStore.

Довольно часто в коммерческих проектах появляется необходимость настраивать внутренние оплаты. Они могут потребоваться как для разовой покупки набора объектов (например, внутренняя валюта приложения), так и для получения постоянного доступа к закрытому контенту в течение некоторого времени (подписки).

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

Но в оплате через Google Play есть нюанс — даже при корректной интеграции в ваше приложение и настройке в кабинете разработчика проведение платежей в России, к сожалению, недоступно.

В AppStore подход немного лояльнее. Клиенты имеют возможность оплачивать покупки. Для этого в аккаунте Apple достаточно подключить как источник оплаты мобильный телефон. Важно: в России Apple поддерживает только номера операторов МТС и Билайн.
📎Подробнее о доступных способах оплаты тут.

Кроме этого для аккаунтов разработчиков, зарегистрированных в РФ, есть возможность провести цифровые покупки через внешние ссылки. Для этого необходимо подать в App Store Connect специальную заявку, после одобрения которой появится возможность настроить StoreKit External Purchase Link Entitlement в приложении. Комиссия за такие платежи — 27%.
📎Делюсь полезным туториалом по настройке и заполнению заявки.

Меньше всего проблем сейчас встречается в оплатах через RuStore. Здесь нет никаких ограничений на источники платежей и регион, откуда производится оплата. RuStore позволяет оплатить продукт различными способами, например, картой онлайн, через сервисы T-Pay, SberPay и даже СБП, что сейчас очень удобно для пользователей.

👍В следующем посте разберем на практике, как настроить в приложении in-app покупки c вызовом нативных окон от сторов.
Делитесь своим опытом в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥128❤‍🔥4👍3👌2🆒1