Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Мобильная разработка

Руководство по созданию нативного приложения с помощью Flutter

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

Однако универсальный язык существует лишь в параллельной вселенной. А а реальности мы имеем дело с множеством технологий и сфер влияния. В мире мобильной разработки доминируют 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 плагин:

  1. Стартуем Android Studio.
  2. Открываем плагин preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
  3. Select Browse repositories…, выбираем Flutter плагин и кликаем install.
  4. Кликаем «Yes», когда будет предложено установить плагин Dart.
  5. Выбираем «Restart», когда эта опция будет предложена.

Теперь вы можете создать новый проект для Flutter: File> New> New Flutter Project.

Выбираем Flutter application.

Flutter-1

Выбираем имя проекта и указываем путь к SDK. Если SDK не определен, просто нажимаем Install SDK.

Flutter-2

Flutter-3

Далее выбираем 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

Flutter-4

Нажимаем package get, чтобы подтянуть зависимость. А Виджет, изменяющий свое состояние, мы создадим, унаследовавшись от базового класса:

Создать состояние также можно, унаследовавшись от базового класса состояния:

В классе виджета вы переопределяете метод createState() и возвращаете объект состояния. Класс состояния содержит метод билдер, переопределяя который, вы конфигурируете виджет. В итоге метод билдер вашего главного класса самого приложения будет выглядеть так:

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

В результате мы можем отметить элементы и перейти на новый экран:

Flutter-7

 

Что же дальше? А много чего:) По сути, чтобы начать разрабатывать мультиплатформенные приложения необходимо перелопатить массу интересной информации. Начиная с языка Dart (на котором, если вы вдруг не заметили и был написан этот пример), а также изучить множество виджетов + реактивный подход к программированию, который проповедует Flutter. Но это темы для отдельных статей. Так что не переключаемся!

Больше информации о Flutter можно найти здесь.

department
Статью подготовил
Отдел мобильной разработки
Профессиональная разработка нативных приложений под Android и iOS, а также реализация гибридных кроссплатформенных решений и мобильных сайтов.
New Articles