Что нового во флаттере 2?

В прошлом году я написал две статьи в Smashing Magazine об использовании Flutter на веб- и настольных платформах. Первая статья была общим введением в веб-разработку и разработку для настольных компьютеров и была посвящена созданию адаптивного пользовательского интерфейса; вторая статья была посвящена проблемам, с которыми вы можете столкнуться при разработке приложения Flutter, работающего на нескольких платформах.

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

Флаттер 2 уже здесь

3 марта Google провел мероприятие Flutter Engage, на котором был запущен Fluter 2.0. Этот выпуск действительно соответствует версии 2.0 со многими изменениями, которые обещают сделать Flutter действительно готовым выйти за рамки разработки мобильных приложений.

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

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

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

Они также выпустили Flutter-версию темы Yaru для Ubuntu, которую мы будем использовать позже в этой статье для создания настольного приложения Flutter, которое отлично смотрится на рабочем столе Ubuntu, а также использует некоторые новые функции Flutter. Вы можете взглянуть на анонс Google Flutter 2, чтобы получить более полную картину.

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

Общие изменения удобства использования для больших устройств

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

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

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

Также похоже, что в какой-то момент Flutter автоматически покажет подходящие полосы прокрутки , когда содержимое приложения прокручивается.

Между тем, вы можете просто обернуть любой прокручиваемый вид виджетом полосы прокрутки по вашему выбору и создать ScrollController , чтобы добавить его в качестве controller как для полосы прокрутки, так и для прокручиваемого виджета (если вы никогда не использовали ScrollController , вы используете точно так же, как TextEditingController для TextField ). Вы можете увидеть пример использования обычной полосы прокрутки Material немного дальше в этой статье в примере настольного приложения.

Веб-изменения Flutter

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

Цель компиляции, ранее очень экспериментальная и сложная для использования для рендеринга вашего приложения (с WebAssembly и Skia), теперь называется CanvasKit . Он был усовершенствован, чтобы обеспечить согласованный и производительный опыт при переходе от запуска приложения Flutter на мобильных устройствах к его запуску в браузере.

Теперь по умолчанию ваше приложение будет отображать с помощью CanvasKit для настольных веб-пользователей и с помощью HTML-рендерера по умолчанию (который также имеет улучшения, но не так хорош, как CanvasKit) для мобильных веб-пользователей.

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

На самом деле это не дополнение к самому Flutter, а недавнее дополнение к пакету Google url_launcher . Вы можете найти полное описание и примеры использования класса Link в официальном справочнике по API.

Выбор текста был улучшен, так как теперь точка поворота соответствует тому месту, где пользователь начал выбирать текст, а не левому краю рассматриваемого SelectableText . Кроме того, теперь параметры копирования/вырезания/вставки существуют и работают правильно.

Тем не менее, выделение текста по-прежнему не является первоклассным, так как невозможно выбрать текст в разных виджетах SelectableText , а выбираемый текст по-прежнему не используется по умолчанию, но мы поговорим об этом, а также о других выдающихся веб-недостатках Flutter (отсутствие поддержки SEO). , в первую очередь) в заключении к этой статье.

Изменения рабочего стола Flutter

Когда в прошлом году я писал о веб-разработке и разработке для настольных компьютеров с помощью Flutter, я в основном сосредоточился на создании веб-приложений с помощью Flutter, учитывая, что разработка для настольных компьютеров все еще считалась очень экспериментальной (даже не на beta -канале). Однако теперь поддержка рабочего стола Flutter вскоре последует за веб-поддержкой и будет работать стабильно.

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

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

Пример настольного приложения, созданного с помощью Flutter

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

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

Первое, что нужно сделать, это выяснить ваши зависимости .

Прежде всего, у вас должна быть включена разработка рабочего стола Flutter с помощью команды

 flutter config --enable-${OS_NAME}-desktop

где вы бы заменили ${OS_NAME} на выбранную вами настольную ОС: windows , linux или macos . В этом примере я буду использовать Linux, учитывая, что мы собираемся использовать тему Ubuntu.

Существуют также другие зависимости, необходимые для создания нативных приложений для каждой платформы, например, в Windows вам понадобится Visual Studio 2019, в macOS вам потребуются Xcode и CocoaPods, а актуальный список зависимостей Linux можно найти на официальном сайте Flutter.

Затем создайте проект Flutter, запустив:

 flutter create flutter_ubuntu_desktop_example

Затем мы должны получить саму тему (единственную зависимость нашего приложения), добавив yaru к dependencies вашего приложения в pubspec.yaml (в корень исходного дерева):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Затем давайте перейдем к lib/main.dart , где находится код нашего приложения.

Во-первых, мы импортируем то, что нам нужно. В этом случае мы просто импортируем обычную библиотеку Flutter Material Design и тему Yaru (в этом примере мы будем использовать только светлую тему, поэтому show только один объект из пакета Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

Вместо того, чтобы иметь отдельный класс приложения, мы собираемся вызывать конструкторы MaterialApp непосредственно в main при вызове runApp , так что именно здесь мы устанавливаем тему приложения, которая будет темой Yaru, а точнее светлой темой под названием yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

HomePage будет StatefulWidget , содержащим данные, которые мы собираемся показать, учитывая, что они неизменяемы (помните, виджеты всегда неизменяемы, изменчивость обрабатывается в State StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

HomePageState — это место, где мы определяем пользовательский интерфейс и поведение приложения. Прежде всего, давайте посмотрим на дерево виджетов, которые мы хотим построить (исключая элементы списка, сетки и виджеты интервалов):

Мы собираемся ограничить Column слева (тот, который показывает элементы управления для виджетов, отображаемых в правой части приложения) определенной шириной (например, 400 пикселей) с помощью Container , тогда как GridView справа должен быть Expanded , чтобы заполнить вид.

В левой части Row (внутри Column ) ListView должен расшириться, чтобы заполнить вертикальное пространство под Row кнопок вверху. В верхней Row нам также нужно расширить TextButton (кнопку сброса), чтобы заполнить пространство справа от левого и правого шеврона IconButton s.

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

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

и мы закончили!

Затем вы создаете свое приложение с помощью

 flutter build ${OS_NAME}

где ${OS_NAME} — это имя вашей ОС, то же самое, что вы использовали ранее для включения разработки рабочего стола Flutter с помощью flutter config .

Скомпилированный двоичный файл для запуска вашего приложения будет

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

на линуксе и

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

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

В macOS вам нужно открыть macos/Runner.xcworkspace в Xcode, а затем использовать Xcode для сборки и запуска вашего приложения.

Другие изменения флаттера

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

Функция, которую так хотели многие из нас, разработчиков Flutter, — это улучшенная поддержка рекламы Admob , и теперь она наконец включена в официальный пакет google_mobile_ads . Еще один — autocomplete ; для него есть виджет материала Autocomplete , а также более настраиваемый виджет RawAutocomplete .

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

Недавние изменения языка Dart

Важно знать об изменениях, внесенных в язык Dart, которые влияют на разработку приложений Flutter.

В частности, в Dart 2.12 появилась поддержка совместимости с языком C (подробно описанная и с инструкциями для разных платформ на официальном сайте Flutter); кроме того, в стабильный канал выпуска Dart была добавлена null-safety .

null-safety

Самым большим изменением, внесенным в Dart, является введение надежной null-safety , которая получает все больше и больше поддержки со стороны сторонних пакетов, а также библиотек и пакетов, разработанных Google.

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

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

Делаем ваше приложение null-safe

Если вы когда-либо работали с Kotlin, подход Dart к нулевой безопасности будет вам знаком. Взгляните на официальное руководство Dart, чтобы получить более полное руководство по null-safety Dart.

Все типы, с которыми вы знакомы ( String , int , Object , List , ваши собственные классы и т. д.), теперь не могут принимать значение null: их значение никогда не может быть null .

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

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

 int? a = 1

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

Теперь, что если у вас есть значение, допускающее значение NULL, и вы используете его для чего-то, что требует значения, не допускающего значение NULL? Для этого вы можете просто проверить, что оно не равно нулю:

 void function(int? a) { if(a != null) { // a is an int here } }

Если вы со 100% уверенностью знаете , что переменная существует и не равна нулю, вы можете просто использовать ! оператор, например:

 String unSafeCode(String? s) => s!;

Делаем выводы: что мы можем сделать с Flutter 2?

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

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

С другой стороны, веб и рабочий стол еще не совсем готовы.

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

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

Контент-ориентированные приложения, вероятно, не будут такими хорошими, потому что выделение текста по-прежнему не является первоклассным, как мы видели в разделе о текущем состоянии Flutter для Интернета.

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

Дополнительные ресурсы

• Основной доклад (Flutter Engage), YouTube
• Что нового во Flutter 2, Flutter, Medium
• Понимание null safety , Dart.dev
• Адаптивная веб-разработка и разработка для настольных компьютеров с помощью Flutter, Smashing Magazine
• Решение распространенных межплатформенных проблем при работе с Flutter, Smashing Magazine