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

Мы Крым Диджитал

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

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы.

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

Крым Диджитал приняла участие в стратегической сессии

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

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

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

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

Следующий курс намечен на август. Не пропусти анонс записи!