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

Будьте в курсе всех агро новостей

Ищи больше интересной информации в нашем TG-канале Подписаться

Похожие статьи

Заполните форму или свяжитесь
удобным для Вас способом

Контакты

г. Севастополь, ул. Руднева, д.41, 4 этаж технопарк ИТ-Крым +7 978 679-76-353 agro@crimeadigital.ru

Социальные сети

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

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

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

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

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

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

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

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

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

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

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

Лицензия на образовательную деятельность

В 2022 году мы получили лицензию на образовательную деятельность по программам дополнительного профессионального образования! Теперь мы можем обучать специалистов по направлениям Ruby on Rails, ReactJS и Software Testing и выдавать удостоверения о повышении квалификации государственного образца.
В 2022 году мы получили лицензию на образовательную деятельность по программам дополнительного профессионального образования! Теперь мы можем обучать специалистов по направлениям Ruby on Rails, ReactJS и Software Testing и выдавать удостоверения о повышении квалификации государственного образца.

Мы вошли в Реестр эффективно и социально значимых предприятий.

По результатам ежегодной финансово-экономической аналитики Межотраслевой рейтинговой компании Крым Диджитал включена в Реестр эффективных и социально значимых предприятий. По итогу аналитики, в рамках отрасли (ОКВЭД 62.01) и региона Крым, CDG вошло в 4% лучших компаний страны, с результатом – 92 балла!
По результатам ежегодной финансово-экономической аналитики Межотраслевой рейтинговой компании Крым Диджитал включена в Реестр эффективных и социально значимых предприятий. По итогу аналитики, в рамках отрасли (ОКВЭД 62.01) и региона Крым, CDG вошло в 4% лучших компаний страны, с результатом – 92 балла!