Что нового в Android Studio Electric Eel, ч.1

Hola, Amigos! На связи Саша Чаплыгин. Flutter-dev Amiga. Сегодня расскажу об обновлениях в Android Studio Electric Eel. Flutter-разработчики используют Android Studio как IDE для разработки приложений Flutter.

Крашлитика приложений от Firebase Crashlytics

Вы можете просматривать и обрабатывать данные о сбоях приложений из Firebase Crashlytics непосредственно в IDE. Эта интеграция извлекает данные из стека и статистику сбоев из Firebase Crashlytics в новое окно инструмента App Quality Insights в IDE, поэтому вам не нужно переключаться между браузером и IDE.
Благодаря интеграции Android Studio и Crashlytics вы можете писать код и решать основные проблемы сбоев в одном месте. Этот расширенный опыт разработки поможет вам быть в курсе стабильности вашего приложения и свести к минимуму сбоев для ваших пользователей.

Навигация по данным Crashlytics в Android Studio

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

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

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

3. На панели «Проблемы» отображаются основные события, для которых у Crashlytics есть данные, и они отсортированы по наиболее важным сбоям.

4. На панели «Sample Stack Trace» отображаются сведения о последнем возникновении события, которое вы щелкнули на панели « Проблемы ». Вы можете просмотреть стек вызовов события, чтобы перейти к соответствующим строкам в коде. Также есть информация о затронутом типе устройства, его версии Android и времени возникновения события, а также ссылка на событие на панели инструментов Firebase Crashlytics. Панель инструментов полезна, если вы хотите углубиться и проверить дополнительные трассировки стека, тренды и пользовательские журналы.

5. Панель «Подробности» разбивает количество сбоев по типу устройства и версии Android, поэтому вы можете определить, какие группы пользователей наиболее затронуты. Он также показывает, в каких версиях приложения произошел сбой, и количество затронутых пользователей.

6. Используйте фильтры, чтобы выбрать или отменить выбор критических или некритических событий.

7. Используйте фильтры диапазона времени и версии приложения, чтобы отточить определенные подмножества событий.
Помимо возможности переходить от стека вызовов к коду, вы также можете переходить от кода к стеку вызовов: Android Studio теперь выделяет строки кода, связанные со сбоями, чтобы вы могли легко обнаруживать и устранять их.

Что нового в Android Studio Electric Eel, ч.3

Hola, Amigos! На связи Саша Чаплыгин. Flutter-dev Amiga. Это финальная часть об изменениях в Android Studio Electric Eel. Что же еще поменялось?

Статистика SDK
Сведения о зависимостях можно просматривать из нового Google Play SDK Index — общедоступного портала с информацией о популярных зависимостях или SDK. Если определенная версия библиотеки была помечена ее автором как устаревшая, при просмотре этого определения зависимости появляется соответствующее предупреждение Lint. Это позволяет обнаруживать и обновлять проблемы с зависимостями во время разработки, а не позже, когда вы публикуете свое приложение в Play Console.

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

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

Flutter Deeplinks, ч.1

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

Deeplinks — это обычная ссылка, и мы можем настроить платформы Android и iOS запускать наше приложение и передавать туда данные. Android и iOS похожи в реализации и работе этих механизмов. В Android есть 2 типа ссылок, открывающих приложение: Deep Links и App Links. У iOS также есть 2 типа ссылок: Custom Scheme Links и Uni Links.

Deep Links для Android
В файле android/app/src/main/AndroidManifest.xml внутри <activity>...</activity> необходимо добавить следующий intent-filter:

<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:scheme="customscheme"
        android:host="customdomain.com"
        android:pathPrefix="/path" />
</intent-filter>

android:scheme — указывается кастомная схема либо http
android:host — указывается имя хоста
android:pathPrefix — опциональный параметр
Такой интент-фильтр будет открывать наше приложение для ссылок вида my-scheme://my-host/my-prefix и my-scheme://my-host/my-prefix*

Протестировать это можно нажатием на саму ссылку (customscheme://customdomain.com/path) или командой ниже:

adb shell am start -a android.intent.action.VIEW -d "customscheme://customdomain.com/path" your-app-package-name

Custom Scheme Links для iOS

Они очень схожи с Deep Links и App Links в Android, но Custom Scheme Links могут иметь только кастомные схемы, но не http и https, для них придумали Uni Links. Для добавления ссылки с кастомной схемой необходимо добавить следующее в info.plist файл:

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>customdomain.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>customscheme</string>
    </array>
    </dict>
</array>

Причем CFBundleURLName необязателен, так как в iOS система смотрит только на CFBundleURLSchemes.

Чтобы проверить работу ссылки, можно открыть симулятор и вызвать команду
xcrun simctl openurl booted customscheme://customdomain.com/1 или customscheme://anything.

Важно: приложение должно быть установлено на устройстве.

В следующем посте я расскажу про продвинутые диплинки, которые при отсутствии приложения на устройстве ведут на GooglePlay или AppStore для его установки.

Hola, Amigos!

Нас ждут длинные выходные, поэтому мы сделали подборку интересных и полезных статей на Habr о Flutter. Будет, что почитать!

1. Nanc — backend-agnostic CMS с Flutterлюшками.
В этой статье речь идет о Not A Normal CMS. Вы узнаете, что это такое и что с помощью этой CMS можно делать. А еще внутри много видео-туториалов, есть ссылки на демо с клиентским и CMS-приложением, можно поиграться.

2. Как интегрировать Яндекс.Карты в приложение на Flutter.
Тут все понятно из названия: подробная инструкция с помощью каких пакетов и инструментов интегрировать Яндекс.Карты в любое приложение на Flutter.

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

4. Flutter & games: пробуем Bonfire в роли игрового движка.
Статья о фреймворке Bonfire:о плюсах, минусах и практическом применении для разработки игр. Как дополнительный бонус — в конце статьи есть ссылка на GitHub с исходным кодом этого эксперимента.

5. Разработка приложения на Flutter с нуля до релиза: Идея + Базовая инфраструктура.
Немного устаревший, но все еще вполне себе рабочий и подробный инструментарий по разработке приложения на Flutter с нуля. Внутри много кода и ссылка на продолжение.

Присылайте в комментарии статьи, которые вам понравились, будет интересно поизучать!

Hola, Amigos!

Мы хотим спросить, что вам интересно узнать о Flutter?

Задайте в комментариях любые интересующие вас вопросы, а мы ответим на них в следующих постах. Может быть, вам интересно узнать о наших must в пакетах или виджетах? Или любопытно узнать о команде Flutter-dev в Amiga? Спрашивайте нас обо всем🤓

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 может сделать привязку вашего приложения с сайтом не сразу, они предупреждают за сутки.

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 и затронутые виджеты будут перерисованы, что приведет к улучшению производительности рендеринга.

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-рынка

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое 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! Этот вопрос вы задали нам в посте, поэтому отвечаем!

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

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

Изображения могут быть одним из главных виновников медленной загрузки веб-приложения. Чтобы оптимизировать изображения, убедитесь, что они сжаты и имеют соответствующий формат. 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
Выбор способа рендеренга сайта
Кастомизация инициализации сайта

Инструменты для отладки на 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 плюсов, то сделаем обучающие посты.

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

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

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

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

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

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

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

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

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

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

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

Нативное 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. Такое решение в любом случае компромисс скорости реализации и производительности.

Hola, Amigos!

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

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

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

Паттерны проектирования во 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 паттернах.

Паттерны проектирования во 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.

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

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

Hola, Amigos!

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