Flutter. Много

Hola, Amigos!

Ну что, темы на май очевидны, мы остановимся на 2:

1. Интересные библиотеки и плагины для разработки на Flutter.
2. Личный опыт: с какими трудностями сталкиваемся и как решаем?

А в июне расскажем обо всем остальном, что было в опросе. Разрыв совсем небольшой, понятно, что все темы интересны. А чтобы оставаться на связи и пообщаться на тему Flutter-разработки — вступайте в чат канала.

Middle Flutter-dev в Amiga

Hola, Amigos!

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

Тебя ждут работа над большими и сложными задачами и крупные кейсы 😏

Нам важен твой опыт в коммерческой разработке на Flutter и в нативе, поэтому без выпущенных приложений в портфолио не обойтись. Общие знания программирования тоже нужны, а у идеального кандидата вообще есть сильное владение и понимание архитектурных паттернов BLoC/ Cubit / Provider.

Мы аккредитованная IT-компания, работаем строго в белую, с нами можно работать из любой точки мира. Узнать про другие плюсы и подробнее ознакомиться с вакансией можно здесь. Присылайте резюме, сопроводительные письма и примеры опубликованных приложений нашему Group Lead HR Кате.

Подборка статей о мобильной разработке на Flutter

Hola, Amigos! Наш тимлид Flutter-направления Тимур Моисеев собрал дайджест статей, которые стоит почитать (а еще полезный бонус).

Перспективы развития Flutter

Это статья-перевод от нашего Flutter-разработчика Саши Чаплыгина. После мероприятия Flutter Forward команда Flutter написала краткую выжимку о планах развития Flutter в 2023 году. В этой статье вы узнаете о том, над чем уже сейчас работает команда Flutter и какие 4 направления приоритетны в этом году.

In App Update - The Flutter Way

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

Dragging, zooming and placing object on indoor map with Flutter

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

Бонусом добавил пакет для текстовой маски.

Hola, Amigos!

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

О чем вы узнаете из кейса:
- почему мы снова выбрали Flutter;
- подробности о каждом этапе разработки;
- почему выбрали тестирование методом черного ящика.

Будем рады вашим лайкам и комментариям! Если есть вопросы, пишите, на все ответим.

Никогда такого не было и вот опять — креативные люди что-то придумали 🤘

Нам 20 лет — и в честь этого большого события проводим специальный стрим с основателями агентства. Расскажем про развитие одного из крутейших диджитал-агентств, как мы научились адаптироваться под любые условия и делать круто вообще всегда 🔥

Когда: 13 апреля в 17:00
Где: канал «Одной ногой в диджитал».
Кто будет: креативный директор Сергей Калюжный, дизайн-директор Александр Ковальский и директор по развитию Сергей Прокофьев.
Ведущий: Валерий Пеньков.

А чтобы не забыть о дне Х, сделали для вас события, которые можно добавить в свой календарь:
Google-календарь
Яндекс.Календарь

Hola, Amigos!

Наши друзья из CreativePeople прямо сейчас в прямом эфире празднуют свое 20-летие (с чем мы их, конечно же, поздравляем🥳)! На протяжении всего года агентство будет проводить интересные приколюшки: стрим с основателями, конкурсы на лучшее видеопоздравление, оживительные истории, шутки-прибаутки и другой интерактивчик. Кому актуально, присоединяйтесь)

Паттерны проектирования во Flutter, ч.2

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Продолжаю рассказывать о паттернах проектирования во Flutter. Подробнее о том, что такое паттерны проектирования я рассказал в этом посте.

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

2. MVVM (Model-View-ViewModel)
Этот паттерн позволяет разделить пользовательский интерфейс от бизнес-логики и модели данных. ViewModel — это слой, который связывает модель данных и пользовательский интерфейс.

3.RxDart

В это паттерне предоставляется функциональность RxJava, RxJS и RxSwift. Он позволяет использовать реактивное программирование для управления потоками данных в приложении.

4. Adapter.

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

5. Observer.

С его помощью объектам можно оповещать другие объекты об изменениях своего состояния. Это позволяет обмениваться информацией без необходимости знать о друг друге.

6. Decorator.

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

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

Паттерны проектирования во Flutter, ч.1

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. В этом посте расскажу о паттернах проектирования во Flutter. Поехали!

Что такое паттерны проектирования?

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

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

Вот часто встречающиеся паттерны проектирования при разработке мобильных приложений на Flutter:

1. BLoC (Business Logic Component).

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

2. Provider.

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

3. MVC (Model-View-Controller).

Он разделяет приложение на три основных компонента: модель (Model), представление (View) и контроллер (Controller). Это позволяет отделить логику отображения от бизнес-логики приложения и облегчает тестирование кода.

4. ScopedModel.

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

5. Redux.

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

В следующем посте расскажу о еще 6 паттернах.

Hola, Amigos!

На связи Саша Чаплыгин. Выпустили новую статью-перевод на Habr о том, что ждет направление Flutter в 2023 году.

Из статьи вы узнаете:
- о 4 направлениях Flutter, которые планируют развивать в 2023 году;
- над чем уже сейчас работает команда Flutter;
- получите много ссылок на полезные материалы.

Прочитать статью можно здесь. Оставляйте комментарии, какие по-вашему мнению направления стоит развивать?

Нативное view во Flutter

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. Зачем используют нативное view во Flutter? Это удобно в тех случаях, когда есть готовое и проверенное решение под нативную платформу, а времени переделывать под Flutter не хватает. Легче показать Android activity напрямую в вашем Flutter-приложении. По такому принципу работают Google maps вo Flutter-приложениях.

В Android есть 2 способа отобразить нативный интерфейс:

1. Virtual displays — рендерит виджеты AndroidView внутри VirtualDisplays вместо того, чтобы добавлять их в иерархию View.

VirtualDisplay выводит свои выходные данные в необработанный графический буфер (доступ осуществляется через getSurface()), а не на какой-либо фактический дисплей устройства. Это позволяет Flutter чередовать представление Android View внутри своего собственного дерева виджетов. Он берет текстуру из выходных данных VirtualDisplay и обрабатывает ее как текстуру, которая связана с любым другим виджетом Flutter в его внутренней иерархии. Некоторые взаимодействия с платформой, такие как управление клавиатурой и специальные возможности, могут не работать.

2. Hybrid composition «прокидывает» нативный View в Fluttter.

Управление клавиатурой и доступность работают «из коробки». До Android 10 этот режим может снизить fps интерфейса Flutter. Но в документации команда Flutter подчеркивает — используйте AndroidView (Virtual displays) когда это возможно, поскольку для этого требуется меньше шаблонного кода, чем для AndroidViewSurface, и нет никакой разницы в производительности или других компромиссах.

В iOS есть возможность использовать только Hybrid composition. А виджет называется UiKitView.

Помните, что PatformView отвечает только за отображение, что бы еще подкрутить логику из натива нужно настроить общение между Flutte - native через MethodChannel, и там уже передавать данные и вызывать методы для изменения ui в нативном view. Такое решение в любом случае компромисс скорости реализации и производительности.

Отвечаем на вопросы, ч.1

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. Я собрал список вопросов из того-самого-поста, и теперь отвечаю на них. Поехали!

1. "Часто в примерах конфигурации вида темы цветов, текстов и остальное выводят в константы. Вопрос: насколько производительнее иметь эти данные в статике константной, нежели генерировать в рантайме по необходимости. Зачем вообще хранить статично эти свойства, если есть вероятность, что обращения к ним не будет."

Нужно стараться прописывать все цвета, шрифт и прочее в тему (ThemeData). Такой подход позволит избежать лишних ручных вставок цвета или шрифта в UI, так как они подтянутся из темы. Где нужно, там их можно будет переопределять. Если в приложении нужно реализовывать другие цветовые схемы по типу день-ночь, такой подход знатно сократит время и качество ее реализации. Если у вас очень много цветов, то это вопрос к профессионализму дизайнера или оптимизации дизайна. Обычно в UI-kit используется 20-30 цветов.

К вопросу про производительность. Theme — это InheritedWidget, поэтому все, что в нем проинициализированы, будет в едином экземпляре и доступно через контекст. Создание экземпляров класса Color так же не является трудозатратной операцией, еще и сборщик мусора потом эти экземпляры удалит. Это, скорее, вопрос удобства и дальнейшей поддержки реализованного вами подхода для стилизации приложения. Можно и в каждом виджете прописывать цвета, шрифты, но когда вы столкнетесь с необходимость перехода на новый дизайн, будет тяжело.

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

2. "Второй вопрос про статичные функции. Част часто вижу их применение. Есть ли разница для приложения при использовании статичных функций, а не функций объекта. Можно объявить статик функцию и вызвать MyClass.foo();. Но с таким же успехом можно создать объект класса и вызвать у него функцию. А после необходимости он исчезнет из памяти MyClass().foo()"

Спасибо за вопрос. Конечно, влияние будет, но зависит от того, что делает эта самая foo(). Скажем, провести какие-нибудь манипуляции с массивом вряд ли проблема. А вот инициализировать СДК, который редко используется, я бы не стал,. Тут лучше сделать по принципу: нужно? -> инициализируем -> используем -> освобождаем место.

3. Влияет ли статика на финальный продукт, если да, то как?

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

Надеюсь, я правильно понял ваши вопрос и дал четкие ответы, если что, пишите. Удачи!

Инструменты для отладки на Flutter

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. В посте вы попросили рассказать побольше об отладке, поэтому расскажу об инструментах для этого.

Flutter Performance tools — это набор инструментов для анализа и оптимизации производительности Flutter-приложений. Они помогают разработчикам обнаруживать проблемы производительности, такие как jank (задержки), утечки памяти, сборки мусора и другое.

DevTools — это набор инструментов, которые доступны в браузере Chrome. Он позволяет анализировать и отлаживать ваше Flutter-приложение и включает в себя инструменты для профилирования приложения, мониторинга использования памяти и отладки кода.

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

Memory Profiler — это инструмент, доступный в Android Studio и Visual Studio Code, который позволяет анализировать использование памяти в вашем приложении. Он позволяет находить утечки памяти и оптимизировать ее использование.

Важное примечание: профилировать приложение нужно в profile сборке, чтобы данные были наиболее корректные. Работа в профилировании — это по своей сути постоянный анализ. Нужно изучить потребления памяти, проанализировать полученные данных и действия с кодом, чтобы это исправить, и повторное изучить то же потребления памяти на предмет исправления и не создания новой проблемы.

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

К сожалению, лучше совета, чем сидеть и профилировать, дать не могу. Анализируем ➡️ предполагаем ➡️ правим ➡️ смотрим на результаты. И с опытом придет понимание.

Полезные ссылки:
-https://docs.flutter.dev/development/tools/devtools/performance
-https://docs.flutter.dev/development/tools/devtools/memory
-https://docs.flutter.dev/development/tools/devtools/app-size

Ну и видео от команды Flutter — https://www.youtube.com/watch?v=nq43mP7hjAE.

Если тема актуальна, ставьте плюсы в комментариях. Если соберем 50 плюсов, то сделаем обучающие посты.

Как ускорить загрузку веб-приложения?

Hola, Amigos! Этот вопрос вы задали нам в посте, поэтому отвечаем!

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

Оптимизируйте изображения

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

Что еще можно сделать:
- Сжать изображения с помощью таких инструментов, как TinyPNG, ImageOptim или Photoshop.
- Загружать изображения соответствующего размера в зависимости от устройства и разрешения экрана.

Минимизируйте HTTP-запросы

Каждый раз, когда пользователь посещает веб-приложение, его браузер отправляет HTTP-запрос для каждого файла на странице, включая изображения, таблицы стилей и файлы JavaScript. Чем больше запросов, тем дольше будет загружаться страница. Чтобы свести к минимуму HTTP-запросы, вы можете объединить файлы CSS и JavaScript в один файл каждый и использовать image sprites для объединения нескольких изображений в один файл.

Что еще можно сделать:
- Объединить нескольких файлов CSS в один.
- Объединить нескольких файлов JavaScript в один.
- Использовать image sprites CSS, чтобы уменьшить количество запросов изображений.
- Избегать использования слишком большого количества сторонних скриптов.

Используйте кеширование браузера

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

Что еще можно сделать:
- Использовать кэширование на стороне сервера с такими технологиями, как Redis или Memcached.
- Установить соответствующие заголовки кэширования и время истечения срока действия для разных типов контента.

Сокращайте время отклика сервера

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

Что еще можно сделать:
- Использовать веб-сервер с высокой производительностью и низкой задержкой, такой как NGINX или Apache.
- Оптимизировать запросы к базе данных и убедитесь, что они эффективны.

Оптимизируйте код

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

Что еще можно сделать:
- Использовать методы ленивой загрузки, чтобы загружать ресурсы только тогда, когда они необходимы.
- Использовать отрисовку на стороне сервера (SSR), чтобы ускорить отрисовку начальной страницы и улучшить взаимодействие с пользователем.

Полезные ссылки на Flutter-документацию:
FAQ
Выбор способа рендеренга сайта
Кастомизация инициализации сайта

Что такое GoRouter?

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Раз в неделю мы планируем рассказывать о пакетах для Flutter, и сегодня поговорит о GoRouter.

GoRouter — это навигационный пакет для Flutter, который предоставляет более гибкий и простой способ управления маршрутизацией в приложении Flutter. Он позволяет управлять маршрутизацией и передавать параметры между экранами с помощью более простого и читабельного синтаксиса.

GoRouter предлагает следующие преимущества:

- Гибкость: GoRouter позволяет определять маршруты в любой последовательности и в любых местах в коде.
- Удобство: с GoRouter можно передавать параметры маршрута в более простом и читабельном виде.
- Читаемость: маршруты в GoRouter определяются в виде простых и понятных строковых значений.
- Поддержка deeplink'ов: GoRouter поддерживает deeplink'и, которые могут быть созданы во время выполнения приложения.
- Независимость: GoRouter не зависит от конкретного типа виджета или библиотеки состояний.

Для использования GoRouter вам нужно добавить его в зависимости вашего проекта в файле pubspec.yaml:

dependencies:
go_router: ^2.3.0

Затем вы можете создать экземпляр GoRouter и определить маршруты. Например, вы можете определить маршруты для двух экранов: HomePage и SettingsPage:

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

import 'home_page.dart';
import 'settings_page.dart';

final goRouter = GoRouter(
routes: [
GoRoute(
path: '/',
pageBuilder: (context, state) => HomePage(),
),
GoRoute(
path: '/settings',
pageBuilder: (context, state) => SettingsPage(),
),
],
);

Затем вам нужно использовать экземпляр GoRouter в качестве главного маршрутизатора вашего приложения. Например, вы можете использовать его в методе build вашего MaterialApp:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerDelegate: goRouter.delegate(),
routeInformationParser: goRouter.routeInformationParser(),
);
}
}

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

Подборка книг по чистой архитектуре

Hola, Amigos! В посте вы задали нам много вопросов, и одним из них стал «узнать подробнее о чистой архитектуре». Мы собрали топ-4 книг по теме и с радостью делимся! Книги будут полезны как опытным разработчикам, так и начинающим.

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

Вот несколько рекомендаций по книгам:

1. «Чистая архитектура: Искусство разработки программного обеспечения» Роберта С. Мартина.

Мы ни раз упоминали эту книгу, она считается исчерпывающим руководством по чистой архитектуре и охватывает все аспекты от теории до практики. Если вы ее не читали — must-read №1!

2. «Реализация методов предметно-ориентированного проектирования» Вона Вернона.

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

3. «Создание микросервисов» Сэма Ньюмана.

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

4. «Шаблоны архитектуры корпоративных приложений» Мартина Фаулера.

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

Hola, Amigos!

Приглашаем 14 марта 2023 года на практическую кейс-конференцию
↗️ HR IT DAY | IT-таланты: как привлекать, развивать и удерживать

Среди спикеров: НЛМК IT, ГК ЛАНИТ, SRG-IT, СК Кардиф, АШАН, IT-компания Lad, Росбанк, ИННОТЕХ, Онлайн-Кинотеатр KION, ICL Services, ГК Урбантех, Ростелеком-Солар и др.

В рамках практических сессий и дискуссий участники обсудят:
- Каковы основные тренды в стратегии подбора IT-специалистов
- Как выстроить систему оценки IT-специалистов и вовлечь тимлидов в данный процесс
- Как снизить зависимость работодателя от уникальных IT-специалистов – минимизация BUS-фактора
- Как построить систему самообучения IT-специалистов
- Опыт построения эффективных команд
- Как и зачем создавать сообщества для укрепления HR-бренда в IT-среде
- Как создать питательную среду для привлечения, выращивания и сохранения IT-звезд
- Как адаптировать работу HR-команды к изменениям IT-рынка

Подробнее на сайте

RepaintBoundary

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Этот пост — один из многих о виджетах. Сегодня поговорим про RepaintBoundary.

RepaintBoundary — это виджет во Flutter, который позволяет оптимизировать производительность рендеринга, предотвращая ненужные перерисовки в частях дерева виджетов, которые не изменились.

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

Как это работает?

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

Обернув анимированные виджеты в RepaintBoundary, можно предотвратить ненужную перерисовку. Теперь только виджет RepaintBoundary и его дочерние элементы, которые изменились, будут перерисованы, в то время как остальное дерево виджетов останется кэшированным и неизмененным.

Чтобы использовать виджет RepaintBoundary в своем приложении Flutter, просто оберните виджет, который вы хотите оптимизировать, в RepaintBoundary. Например:

RepaintBoundary(
  child: MyWidget(),
);

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

Flutter Deeplinks, ч.2

Hola, Amigos! С вами Антон Мартышков, Flutter-dev Amiga. В прошлом посте я рассказал про Deep Links для Android и Custom Scheme Links для iOS. Сегодня расскажу об их продвинутых версиях — App Links для Android и Uni Links для iOS.

Основное их отличие от предыдущих это:

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

Android

1. Для работы с App Links у вас уже должно быть подписанное приложение и аккаунт разработчика в Google Play Console. В нем необходимо перейти в setup - app-integrity, там найти sha256-ключ для конфиг-файла ниже.

2. Далее создаем новую папку .well-known в корне вашего сайта и добавляем туда файл assetlinks.json, его код ниже. Не забудьте заменить com.example на имя пакета вашего приложения:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example",
    "sha256_cert_fingerprints":
    ["Ваш - sha256_cert_fingerprints"]
  }
}]

. Проверьте, что перейдя по ссылке типа - https://customdomain.com/.well-known/assetlinks.json вы видете содержимое файла.

3. В файле android/app/src/main/AndroidManifest.xml в блок activity необходимо такой intent-filter:

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" />
    <data android:host="customdomain.com" />
</intent-filter>

android:scheme — указывается https
android:host — указывается имя хоста

Протестировать работу этого диплинка можно командой
adb shell am start -a android.intent.action.VIEW -d "https://customdomain.com" your-app-package-name.

iOS

1. Чтобы работать с Uni Links у вас должен быть аккаунт разработчика и сайта с https-схемой, куда позже можно закинуть конфиг файл - apple-app-site-association.

В консоле разработчика нужно включить Identifiers-> Associated Domains - enabled
Далее в Xcode перейти в Capabilities - Associated Domains и добавить новый домен наподобие этого: applinks:customdomain.com

Где applinks так и пишем, ничего не меняем, а customdomain.com — ваш сайт без https://.

2. Создаем файл apple-app-site-association (его код ниже) и кладем в уже знакомую нам .well-known папку в корневом каталоге вашего сайта.

{ 

"applinks": {
"apps": [],
"details": [
{
"appID": "<TeamId>.<BundleId>",
"paths": [ "*" ]
}
]
}
}

https://branch.io/resources/aasa-validator/ — этот инструмент подскажет вам, все ли правильно там положилось и доступно ли это для Apple.

Последние гайдлайны по этому файлу на iOS здесь. TeamId можно найти по ссылке, а BundleId в Xcode.

"paths": [ "*" ] значит, что по любой ссылке вашего сайта будет открываться ваше приложение, как изменить такое поведение описано здесь.

Протестировать приложение можно командой xcrun simctl openurl booted, но учтите, что Apple может сделать привязку вашего приложения с сайтом не сразу, они предупреждают за сутки.

Hola, Amigos!

Спасибо за интересные вопросы! Мы будем отвечать на них постепенно в ближайшие недели. А пока присоединяйтесь к чату канала, где можете общаться и задавать друг другу вопросы уже сейчас👨‍💻 Ссылка на чат: https://t.me/+U37TSSnVbYxkZWFi.