Представьте, что в мире существует универсальный язык программирования, используя который можно создавать различные продукты на разных платформах. Вам не нужно тратить кучу времени на изучение новых языков и фреймворков. Разработка стала быстрой и дешевой.
Однако универсальный язык существует лишь в параллельной вселенной. А а реальности мы имеем дело с множеством технологий и сфер влияния. В мире мобильной разработки доминируют iOS и Android. (Windows Phone, ау! Тобой еще кто-то занимается?).
Каждая сфера требует специфических знаний, а именно — особенности платформы и ведущего языка: Swift для iOS и Kotlin (Java) для Android. На сегодня существует 3 решения универсальной SDK для разработки мобильных приложения — React Native, Xamarin и с недавних пор — Flutter — SDK от Google, позволяющий строить нативные приложения для iOS и Android. Flutter работает с существующим кодом и является бесплатным оpen source проектом. Именно о нем мы и хотим вам сейчас рассказать.
В этой статье мы рассмотрим разработку с помощью Flutter под Android. А это значит, что в ход пойдет Android Studio. Для iOS вам просто понадобиться XCode и столь же простая настройка. Итак, Android. Вооружаемся Android Studio, version 3.0+ и устанавливаем Flutter плагин:
- Стартуем Android Studio.
- Открываем плагин preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
- Select Browse repositories…, выбираем Flutter плагин и кликаем install.
- Кликаем «Yes», когда будет предложено установить плагин Dart.
- Выбираем «Restart», когда эта опция будет предложена.
Теперь вы можете создать новый проект для Flutter: File> New> New Flutter Project.
Выбираем Flutter application.
Выбираем имя проекта и указываем путь к SDK. Если SDK не определен, просто нажимаем Install SDK.
Далее выбираем package name и добавляем поддержку Swift и Kotlin, если в этом есть необходимость. В общем-то это всё, что нужно для начала работы над проектом. Можете еще запустить default код, сгенерированный Flutter. Предварительно запустите эмулятор или подключите девайс 🙂
Давайте напишем Hello world app.
А теперь рассмотрим особенности синтаксиса.
- В этом примере мы используем Material стиль, поскольку разрабатываем в Android studio. Flutter предлагает множество готовых дизайнерских виджетов. Для iOS платформы будет доступен Coopertino стиль.
- => Этот символ всего лишь синтаксис для однострочной функции
- Во Flutter все является виджетом. Даже само приложение. Stateless and Statefull widgets — виджеты с изменяемыми и неизменяемыми состояниями.
- The Scaffold widget по сути является шаблоном, включающим стандартные компоненты экрана. Иерархия может быть сложной и содержать, например, app bar, body, меню и прочее.
- Для виджетов основным методом будет build() — это то, как виджет должен выглядеть.
- Виджет может содержать в себе еще виджеты. Вложенность может оказаться достаточно глубокой.
- Виджеты без отслеживания состояния неизменяемы, то есть их свойства не могут изменяться — все значения являются окончательными.
- Виджеты с отслеживанием состояния поддерживают состояние, которое может изменяться в течение времени существования виджета. Реализация виджета с отслеживанием состояния требует по крайней мере двух классов: 1) класс StatefulWidget, который создает экземпляр 2) класс состояния. Класс StatefulWidget сам по себе является неизменяемым, но класс State сохраняется в течение всего времени существования виджета.
По сути, во Flutter от вас потребуется создать Widget, сгенерировать состояние для этого виджета и построить его на основе состояния.
В учебных целях, давайте добавим зависимость в файле pubspec.yaml. Библиотека содержит самые используемые английские слова.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
Нажимаем package get, чтобы подтянуть зависимость. А Виджет, изменяющий свое состояние, мы создадим, унаследовавшись от базового класса:
Создать состояние также можно, унаследовавшись от базового класса состояния:
В классе виджета вы переопределяете метод createState() и возвращаете объект состояния. Класс состояния содержит метод билдер, переопределяя который, вы конфигурируете виджет. В итоге метод билдер вашего главного класса самого приложения будет выглядеть так:
Далее давайте создадим список из самых распространенных слов, добавим возможность отметить наиболее понравившиеся и перейти с ними на новый экран. По сути, вся эта логика будет содержаться в классе состояния. Код ниже следует воспринимать, как один класс с комментариями.
В результате мы можем отметить элементы и перейти на новый экран:
Что же дальше? А много чего:) По сути, чтобы начать разрабатывать мультиплатформенные приложения необходимо перелопатить массу интересной информации. Начиная с языка Dart (на котором, если вы вдруг не заметили и был написан этот пример), а также изучить множество виджетов + реактивный подход к программированию, который проповедует Flutter. Но это темы для отдельных статей. Так что не переключаемся!
Больше информации о Flutter можно найти здесь.
