Урок 1. Запускаем Flutter
В этой главе:
– Кроссплатформенная мобильная разработка
– Почему Flutter?
– Настраиваем рабочее окружение
– Запускаем Hello World на Android
– Запускаем Hello World на iOS
Кроссплатформенная мобильная разработка
Для начала несколько слов о том, что такое Flutter и зачем он нам нужен. Если вы знаете ответ на вопрос, что такое кроссплатформенная разработка и Flutter, листайте дальше к пункту 3 этой главы: «Настройка рабочего окружения».
Так вышло, что на сегодняшний день в мире мобильных устройств лидируют 2 платформы – iOS от Apple и Google Android. Представьте, что вам прямо сейчас надо написать мобильное приложение под обе операционные системы. Вам нужно нанять, условно, по 1—3 программиста на каждую платформу. Или по 5, или по 7, в зависимости от сложности проекта.
Возьмем число 5 на платформу – оптимальное, на мой взгляд, количество для проекта средней сложности. Это означает 10 программистов в сумме. Из них статистически будет 2—4 очень хороших, сильных программиста, 2—4 слабеньких и 2—4 средних по уровню. Если же язык программирования один и кодовая база одна, значит, можно взять из этих же 10 программистов 5 лучших. Конечно, останется 5 программистов не у дел, но это возможность переместить их на другие участки работы или дополнительный стимул расти им профессионально. Иными словами, сузив скоуп работ до одной кодовой базы, можно одновременно уменьшить расходы на разработку и увеличить качество. Конечно, это все теория. На практике большинство выбирают нативную разработку, и зачастую оправдано, поскольку только она дает максимальное качество конечного продукта. Но зачастую – не значит всегда. Рассмотрим, когда и как можно применить Flutter.
Почему Flutter?
Если Вы думаете, стоит ли Вам браться за кросс-платформу и конкретно за Flutter, ответьте себе на вопрос: зачем нам нужно это приложение, какие бизнес-цели мы с помощью него решаем? Сравните свой ответ с двумя абзацами ниже и решите к какому относится ваше приложение в большей степени.
Для начала определим, в каких случаях Flutter не очень хорошо подходит. Если кратко, то это все кейсы, когда приложение представляет собой конечный продукт и будет конкурировать с другими такими продуктами в магазине приложений за топовые позиции. Например, это может быть новая Angry Birds, рисовалка, читалка, фитнес-приложение. Вам нужна будет максимальная скорость, точность и плавность при работе приложения, и это все на сегодняшний день дает только нативное приложение. Также следует выделить категорию приложений, в которых планируется активно использовать встроенные в устройства датчики, такие как Bluetooth, гироскопы, камеру. Это конечно, не значит, что Flutter нельзя использовать в перечисленных случаях. Но высока вероятность, что вам так или иначе придется писать нативный код и/или костыли.
С другой стороны, существует множество кейсов, когда реальный бизнес желает получить мобильное приложение, которое будет помогать им в реализации бизнес-процессов и/или дополнять их, но без фанатичной погони за самым модным UI и супер-быстродействием. В качестве примера можно привести программы лояльности, мобильное рабочее место для сотрудников, интернет-магазин, а также многие другие, где приложение будет обслуживать реальный бизнес-процесс.
Резюмируя, небольшие приложения с оффлайновым бизнесом можно и нужно создавать на Flutter, а сам framework рекомендуется к изучению всем мобильным разработчикам.
Настраиваем рабочее окружение
Теперь, когда мы разобрались, в каких случаях мы можем использовать Flutter, давайте уже научимся им пользоваться!
Для начала установим Flutter SDK. Скачайте архив с SDK с официального сайта (https://flutter.dev/docs/get-started/install). Выберите вашу платформу (Windows, Mac, Linux) и следуйте инструкции.
После распаковки архива добавьте в PATH Flutter/bin
export PATH=«$PATH:`pwd`/flutter/bin» // Maс
Здесь может потребоваться перезапустить компьютер.
После установки в командной строке запустите команду
flutter doctor
и убедитесь, что у вас все установлено корректно.
Если планируете собирать и тестировать под iOS, то необходимо установить и обновить Xcode и соответствующие пакеты с помощью brew, следуя подсказке в ответе flutter doctor, а также следовать инструкции для macos https://flutter.dev/docs/get-started/install/macos)
Результаты команды flutter doctor с ошибками
Если планируете тестировать на Android-устройстве, то используйте Android Studio. Если у вас нет Android Studio, следуйте инструкции по установке (https://developer.android.com/studio/install), чтобы установить ее.
Запускаем Hello World! На Android
Итак, приступим к созданию первого приложения на Flutter. Для этого курса вы также можете использовать Android Studio, XCode или VS Code – как вам удобно. Мы будем рассматривать на примере Android Studio.
Запустите Android Studio и выберите Start a new Flutter project.
Интерфейс создания нового проекта
Выберите Flutter Application
Заполните имя flutter_hello_world в поле Project Name
company domain – flyflutter.ru – и жмем Finish.
После запуска мы сразу видим открытый файл main. dart В нем – видим строчку
void main () => runApp (MyApp ());
это начальная точка приложения. Функция main () – это стартовая точка всех приложений на языке Dart. В ней мы здесь вызываем конструктор класса MyApp, который наследуется от StatelessWidget – это тип UI компонента – виджета. Подробнее про язык Dart мы поговорим во второй лекции, а про виджеты – в третьей.
Итак, слева мы видим дерево проекта, справа – редактор.
Код main. dart только что созданного проекта
Весь общий для Android и iOS код находится в папке lib. Сейчас у нас там только файл main. dart
Android Studio сгенерировала простую логики инкрементирования счетчика, мы ее пока удалим, чтобы она нас не путала, и заменим на более простой вариант
Жмите на иконку молнии – Hot Reload – для применения изменений.
Надо отметить, что Hot Reload во Flutter работает действительно быстро и значительно сокращает время разработки.
Ура, на экране вы должны увидеть «Привет, Мир!».
«Привет, Мир!» на эмуляторе
Рассмотрим код подробнее. Как уже говорилось выше, MyApp наследуется от StatelessWidget, это неизменяемый UI компонент-виджет. Вообще, все во Flutter – это виджеты, и приложение тоже. В виджете мы переопределяем метод build, в котором указывается, что и как отрисовать.
В нашем примере мы возвращаем объект MaterialApp, который создаем посредством конструктора. А в конструктор передаем название, тему и виджет home, которому назначаем Scaffold – скелет приложения, который в свою очередь содержит appBar и body. Здесь уместна аналогия с HTML, где также есть тэги <title> и <body>.
Давайте немного увеличим текст и поиграем цветами:
Виджету Scaffold мы задали красный фон, а виджету текста применили стиль, чтобы сделать его больше и заметнее.
Привет, Мир! на Андроид
Преимущество Flutter в том, что вся логика работы с внешним видом приложения (UI) прописывается в коде на том же языке, что и бизнес-логика – на dart. Нет необходимости залезать в папку с ресурсами и редактировать xml верстку.
Запускаем Hello World на iOS
Мы же пишем кроссплатформенный код! Давайте запустим созданное приложение на iOS-девайсе. Для этого просто выберите подключенный iOS-девайс или эмулятор в dropdown-списке и нажмите «Запустить».
Выбор эмулятора iOS
Привет, Мир! на iOS
Экран выглядит потрясающе, однако вверху экрана мешается ненужная иконка debug, да и иконка приложения сейчас никакая. Исправим это.
Для того, чтобы убрать ленточку debug, в добавьте в MaterialApp флаг debugShowCheckedModeBanner со значением false
return MaterialApp (
debugShowCheckedModeBanner: false,
Чтобы поменять иконку, нужно добавить в pubspec. yaml пакет
dev_dependencies:
flutter_launcher_icons: ^0.7.4
Этот пакет значительно упростит нам добавление иконки для двух платформ сразу. Добавим теперь в корне проекта папку assets с иконкой, а также пропишем путь к иконке
flutter_icons:
android: «launcher_icon»
ios: true
image_path: «assets/icons/flyflutter_ic_512.webp»
не забудьте сказать flutter, чтобы смотрел папочку assets
flutter:
uses-material-design: true
assets:
– assets/
– assets/icons/
После этого для генерации иконок запустите в терминале команды
flutter pub get
flutter pub run flutter_launcher_icons: main
Чтобы поменять лейбл (название иконки) приложения:
Для Android – найдите манифест в android/app/src/main/AndroidManifest. xml и добавьте в тег application строку
android: label=«FlyFlutter»
Для iOS же зайдите в Info.plist по пути ios>runner/Info.plist и для ключа укажите имя CFBundleName
<key> CFBundleName </key>
<string> FlyFlutter </string>
Готово. Запустите снова для проверки.
Урок 2. Язык программирования Dart
В этой главе:
– Переменные, типы и область видимости
– Функции
– Конструкторы
– Наследование
– Примеси (mixin)
– Callable классы
– Дженерики
– Асинхронные функции
– Исключения
– Использование библиотек
– Компиляция
Введение
Приложения под Flutter пишутся на языке Dart. Даже сам фреймворк написан на нем. Dart – это высокоуровневый объектно-ориентированный язык программирования общего назначения с открытым исходным кодом. Был разработан в Google. Испытал влияние C, Javascript, C#, Java. В нем также как и в Java и C# присутствует garbage collector. Язык поддерживает интерфейсы, примеси (англ. Mixin), абстрактные классы, дженерики и статическую типизацию.
Dart был представлен публике в 2011 году авторами Ларсом Барком (Lars Bark) и Каспером Лундом (Kasper Lund). Релиз версии 1.0 состоялся в 2013 году, а версии 2.0 в 2018
Примечание: Здесь и далее в этом курсе мы рассматриваем Dart версии 2
Все приложения на Dart, как и на C и в Java, имеют точку входа в функции main ()
В случае, если необходимо запустить программу на Dart из командной строки, то можно использовать параметризованную main:
Переменные, типы и область видимости
Dart типобезопасный язык. В нем используется как статическая типизация на этапе компиляции, так и динамическая проверка во времени исполнения (runtime) программы. Несмотря на наличие статической типизации, указывать тип переменной необязательно. Например, все объявления и инициализации ниже корректные:
Примечание: В Dart 2 ключевое слово new стало необязательным
Видимость
По умолчанию, все переменные имеют публичную область видимости. Таких привычных для Java-программистов ключевых слов, как private, protected и public в Dart нет.
Однако если добавить нижнее подчеркивание [_] к имени переменной, такая переменная будет иметь область видимости библиотеки, в которой она находится.
Типы
Все объекты в Dart наследуются от базового типа Object. Это аналог Object в Java. В нем также есть метод hasCode () и аналог equals, который заменяет оператор сравнения ==
О проекте
О подписке