Flutter *

Всем привет. В сентябре OTUS запускает новый курс «Flutter Mobile Developer». В преддверии старта курса мы традиционно подготовили для вас полезный перевод.

---

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

Мы будем использовать пакет provider. Если вы новичок во Flutter и у вас нет веских причин для выбора другого подхода (Redux, Rx, хуков и т. д.), это, вероятно, самый лучший подход для старта. Пакет provider прост в освоении и не требует большого количества кода. Он также оперирует концепциями, которые применимы во всех других подходах.

Привет! Меня зовут Мария Лещинская, я QA-специалист в Surf. Наша компания разрабатывает нативные приложения с 2011 года, а с 2018-го мы занимаемся ещё и разработкой под Flutter.

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

Привет!

Уже в этот четверг в рамках нашего шоу PyjamaTalks встретимся с Majid Hajian, евангелистом Flutter и PWA, автором книги «Progressive web app with Angular» и курса «Progressive Web Apps» на Udemy.

Реализующих BLoC паттерн библиотек много. Но та, о которой я расскажу, необычная, и называется isolate_bloc.

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

В чем проблема обычного bloc-а?

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

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

Подготовка

В прошлый раз мы закончили на том, что разместили статическую веб страницу-заглушку, разработанную с использованием Flutter для web. Страница отображает прогресс разработки нашего сервиса, однако данные о датах начала разработки и релиза пришлось захардкодить в приложении. Таким образом мы лишились возможности изменить сведения на странице. Пришло время разработать приложение — сервер данных. Схема всех приложений сервиса — в статье «Сервис на языке Dart: введение, инфраструктура бэкэнд».

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

Повышенная производительность, автозаполнение, новый виджет и многое другое!

Всем привет, я Евгений Сатуров из Surf. Представляю перевод официальной статьи про последний апдейт Flutter 1.20 с моими комментариями. Фреймворк с каждым новым релизом становится всё более отполированным, и сегодня мы рассмотрим, что принес нам stable-канал в конце лета.

Подготовка

В прошлый раз мы закончили на том, что наш веб-сервер получил доменное имя и научился устанавливать безопасное соединение с клиентом. Однако нам пока совсем нечего показать нашему будущему пользователю. Хотя мы уже можем поделиться идеей стартапа и сообщить дату релиза MVP. Для такой задачи подойдёт информационная web-страница. Напишем её на Dart с использованием фреймворка FlutterWeb (здесь рассказываем, почему Flutter использует именно Dart). Все наши клиентские приложения сервиса станут расширением именно этой страницы. Постараемся вести разработку максимально адаптивно и структурировано, чтобы развитие и сборки под нужные платформы (web-android-iOS) стали просто рутиной.

Привет, Хабр! Представляю вашему вниманию перевод статьи «Announcing sound null safety» автора Filip Hracek с моими комментариями:

Null safety — безопасная работа с пустыми ссылками. Далее по тексту для краткости и по причине устойчивости термина будет использоваться английское наименование null, null safety. Да и перевод «нулевая безопасность» наводит совсем на противоположные мысли.
sound — в данном контексте (sound null safety) можно перевести как «надежный».
Если есть предложения по улучшению перевода или нашли ошибки — пишите в личку, постараемся исправиться.

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

В этой статье мы раскроем планы команды Dart по развертыванию null safety, а также объясним, что скрывается за термином Sound null safety, и чем этот подход отличается от других языков программирования.

Всем привет, меня зовут Дмитрий Андриянов. Я Flutter-разработчик в Surf. Чтобы построить эффективный и производительный UI достаточно основной библиотеки Flutter. Но бывают случаи, когда нужно реализовывать специфичные кейсы и тогда придётся копать в глубь.

Материал, перевод которого мы публикуем сегодня, подготовили Крис Селлз из Google и представитель компании Canonical Кен ВанДин.

Компания Google, в том, что касается Flutter, всегда стремилась к тому, чтобы сделать этот фреймворк универсальным инструментом, позволяющим создавать привлекательные интерфейсы, работающие на любых платформах так же быстро, как интерфейсы «родных» приложений этих платформ. Чтобы убедиться в том, что это возможно, мы начали с того, что сосредоточили усилия на мобильных платформах — Android и iOS. В результате в Google Play оказалось опубликовано более 80000 быстрых и красивых Flutter-приложений.



Мы, опираясь на достигнутые успехи, вот уже более года заняты расширением возможностей Flutter на настольные платформы — на macOS, Windows и Linux. Это касается и веб-приложений, и традиционных настольных проектов. В частности, мы заняты серьёзным рефакторингом движка. Рефакторинг направлен на поддержку работы с мышью и клавиатурой в том стиле, в котором это принято в настольных системах, а так же на поддержку окон, размер которых можно менять. Сюда входят и новые возможности пользовательских интерфейсов, которые хорошо подходят для настольных платформ. Это, например, поддержка Material Density и NavigationRail. Сюда же относятся и эксперименты по глубокой интеграции с настольными операционными системами благодаря Dart:FFI, и работа с системными меню и со стандартными диалоговыми окнами. Всё это делалось для того чтобы убедиться в том, что Flutter подходит не только для создания мобильных проектов, но и готов к тому, чтобы на его основе можно было бы разрабатывать настоящие настольные приложения.

Доменное имя

В прошлый раз мы закончили на том, что в докер контейнере запустили веб-сервер NGINX, раздающий статический файл index.html. В этот раз мы расширим функциональность веб-сервера, добавив шифрование данных и принудительную переадресацию с http на https.

Flutter набирает популярность среди разработчиков. Большенство подходов в построении приложений уже устоялись и применяются ежедневно в разработке E-commerce приложений. Тема навигации опускают на второй или третий план. Какой API навигации предоставляет Фреймворк? Какие подходы выработаны? Как использовать эти подходы и на что они годятся?

Введение

Начнём с того, что такое навигация? Навигация — это метод который позволяет перемещаться между пользовательским интерфейсом с заданными параметрами.
К примеру в IOS мире организовывает навигацию UIViewController, а в Android — Navigation component. А что предоставляет Flutter?

Navigator

Экраны в Flutter называются route. Для перемещениями между route существует класс Navigator который имеющий обширный API для реализации различных видов навигации.

Всем привет! Меня зовут Михаил Зотьев, я Flutter-разработчик и тимлид в Surf.

Продолжаю серию материалов о внутреннем устройстве работы Flutter:

1. Flutter под капотом
2. Flutter под капотом: Binding > Вы находитесь здесь
3. Flutter под капотом: Owners

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

Введение

Меня, Flutter-разработчика, знакомые часто спрашивают: «Что же такое язык Dart?». Качают головой со словами: «А вот Петя серьёзные транспорты на Java пишет, а в Яндексе вообще плюсы в проде...». Ну что ж, пожалуй, действительно, Dart далёк от практик «фабрик для создания фабрик» из Java. Однако если стоит задача реализовать клиентские приложения сразу для нескольких платформ, не утонув в потоке задач по синхронизации разработчиков разных целевых ОС; создать целостный UI, узнаваемый, но специфичный для Android, iOS и веб и в целом уложиться в адекватные бюджет и сроки, — здесь Flutter не имеет конкурентов. И эти вопросы стоят вдвойне если у вас… стартап.

Итак, легенда: некий стартап решил создать новый сервис… ну, например, для между пользователями сервиса. Цель стартапа — выпустить MVP за три месяца на трех платформах (плюс четвертая — сервер, конечно).

10 лет назад я бы сказал, что этот кейс не имеет решения и постарался бы держаться от него подальше, 3 года назад решением мог стать стек ReactNative/React/NodeJs, в 2020 году для этого есть Dart. Добро пожаловать в атмосферу разработки альфа версии сервиса, я постараюсь наглядно пройти и объяснить весь процесс разработки. Код всех приложений будет выложен в паблик. Комментарии, включая набросы и холивары, приветствуются. Спросить автора «по существу» или просто посоветоваться можно в Telegram канале нашего отдела.

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

Всем привет. Меня зовут Дмитрий Андриянов. Два года писал на React Native, сейчас я разработчик в Surf и уже полтора года пишу на Flutter. Когда я только решил серьёзно взяться за Flutter, я бы очень хотел найти статью от разработчика, который перешёл с React Native на Flutter и узнать его мнение. Теперь этот разработчик — я.

Скорее-всего вы видели такие отзывы о React Native и как компании отказываются от него. Я поделюсь своим личным мнением со стороны одного разработчика, а не компании.

Эта статья для тех, кто:

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

Ниже расскажу почему в своё время я выбрал React Native, поделюсь причинами ухода во Flutter и приведу основные различия между React Native и Flutter, которые, на мой взгляд, наиболее важны. Со времени ухода с React Native прошло много времени — что-то изменилось и исправлено. Я постарался это учесть, но что-то мог упустить из виду.

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

Привет, меня зовут Артём. Я руководитель Flutter-разработки в Surf и со-ведущий FlutterDev подкаста.

Flutter-отделу в Surf уже больше года. За это время мы сделали несколько проектов: от маленьких служебных, до полноценных е-коммерс и банкинга. Как минимум, многие из вас уже могли видеть приложение аптеки «Ригла». В статье я расскажу про недавно вышедший пакет mwwm — архитектуру, на которой построены все наши проекты.

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

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

Давайте рассмотрим пример!

Flutter предлагает различные виджеты для работы с определенным набором фигур, например, ClipRect, ClipRRect, ClipOval. Но также есть ClipPath, с помощью которого мы можем создавать любые типы фигур.

В данной статье мы сосредоточимся на том, что можно сделать, используя ClipPath и CustomClipper. Поехали!

Давайте возьмём задачи разной сложности и сравним потребление памяти, FPS, загрузку CPU и GPU при работе мобильных приложений, созданных с помощью разных технологий.