Начиная с 2015 года, с момента анонсирования Flutter SDK, популярность этой платформы и языка Dart растет неукоснительно. На популярных профильных ресурсах нарастает количество статей по данной тематике, а многие компании выпускают в магазины приложения, созданные с помощью FlutterTM.

Цель данной книги – научить вас создавать кроссплатформенные мобильные приложения под Android и iOS на Flutter. На практических примерах мы разберем основы языка Dart и базовые принципы построения Flutter-приложений.

Книга будет интересна нативным мобильным разработчикам, которые уже занимаются разработкой приложений, а также всем, кто желает начать писать кроссплатформенные мобильные приложения и познакомиться с языком Dart. Необходимы только базовые знания по программированию. Опыт front-end-разработки придется очень кстати – с ним материал курса будет освоить гораздо проще. Тем не менее, иметь его совсем не обязательно, тем более что после освоения этой книги вы будете на один большой шаг ближе к тому, чтобы именоваться мастером front-end-девелопмента.

Ученые из Оксфордского университета выяснили, что всего лишь 400 слов покрывают 75% всех английских текстов. Это означает, что со словарным запасом в 400 самых используемых слов вы в трех случаях из четырех будете знать, о чем идет речь в любом тексте. Аналогичным образом написана данная книга: она не претендует на звание учебника или полного справочника платформы Flutter и языка Dart. Мы не будем разбирать по очереди каждый из виджетов в библиотеке material, не будем заучивать все ключевые слова языка Dart. Наоборот, здесь даны самые необходимые элементы, минимум, который надо знать Flutter-разработчику в продакшн, то есть в приложении к решению настоящих задач: созданию мобильных приложений для реального мира.

Как работать с этой книгой

Лучше всего усваивается информация, полученная эмпирическим путем. Поэтому ожидается, что вы будете не просто пассивно читать эту книгу, а по каждому уроку напишете код и запустите приложение на двух платформах – Android и iOS.

В идеале, постарайтесь написать свое приложение, которое будет, к примеру, загружать фотки котиков из сети или выполнять более утилитарную задачу, пусть калькулятор. На ваш вкус. В этой книге мы будем разбирать два примера – сначала создадим простой счетчик, а затем более сложный – загрузка прогноза погоды с сайта openweathermap.org. Если вы захотите написать такое же приложение, вам потребуется API KEY с их сайта, а также API KEY Google Maps. Помимо этого, желательно иметь опыт работы с Git, Android Studio, Gradle.

Всего в книге 10 глав-уроков, первые уроки более простые, последние – более сложные, и для них, возможно, потребуется больше времени. Помогать вам будет уже написанный и работающий код в репозитории проекта – https://github.com/acinonyxjubatus/flyflutter_fast_start – FlyFlutter Fast Start на гитхабе, там для каждого урока выделена своя ветка. Старайтесь не просто копировать оттуда код, а вдумчиво писать его, только лишь сверяясь с кодом на гитхабе. Ниже вкратце приведено описание уроков, а также указаны ссылки на соответствующие ветки репозитория.

Урок 1. Запускаем Flutter [ветка lesson_1_hello_world]

Научимся запускать проект на Flutter под Android и iOS, а также совершать простейшие манипуляции с виджетами. Помимо этого, узнаем чем может быть полезен Flutter и когда на нем можно создавать приложения.

Урок 2. Язык программирования Dart

Обзорно пройдемся по основным возможностям и правилам языка Dart

Урок 3. StatelessWidget и StatefulWidget [ветки lesson_3_1_stateless_widget, lesson_3_1_stateful_widget]

Научимся создавать Stateless и StatefulWidget-ы. Узнаем про состояния виджетов, попробуем ими манипулировать. Также узнаем, как декорировать и выравнивать виджеты.

Урок 4. Создание списка элементов [ветка lesson_4_listivew]

Познакомимся с ListView, узнаем какие есть способы его создания. Полученные знания применим для создания списка с прогнозами погоды.

Урок 5. Загрузка данных с сервера [ветка lesson_5_http]

Узнаем как можно выполнить асинхронную работу во Flutter. Сделаем запрос на сервер, получим, распарсим и покажем полученную информацию на клиенте. Таким образом, создадим полноценное клиент-серверное приложение.

Урок 6. Inherited Widgets, Elements, Keys [ветка lesson_6_inherited]

Узнаем, что такое Inherited Widget, а также на примере посмотрим как он работает. Разоберемся с тем, что такое Element-ы и как они работают. Помимо этого, мы познакомимся с ключами Keys и узнаем когда и как их нужно использовать.

Урок 7. Навигация между экранами, Работа с Google Maps [ветка lesson_7_navigation_maps]

Научимся переключать экраны с помощью Navigator-а. Сможем подключить и показать карты от Google Maps в приложении, а также подключим дополнительный необходимый в примере пакет timezone.

Урок 8. SQLite, Clean Architecture [ветка lesson_8_sqlite_clean_architecture]

Сумеем подключить SQLite и сохранить данные в локальной базе данных, а также прочесть их. Убедимся, что во Flutter тоже можно и нужно писать чистый код и напишем свою реализацию паттерна Repository.

Урок 9. BLoC, Streams [ветки lesson_9_bloc, lesson_9_1_counter_bloc]

Узнаем, что такое BLoC, чем он полезен и как использовать библиотеку bloc. Все это применим на практике: мы произведем значительный рефакторинг приложения погоды, придав коду приличествующий вид – повысим читаемость и поддерживаемость.

Урок 10. DI, Тесты [ветки lesson_10_di_tests, lesson_9_1_counter_bloc]

Освоим технику инверсии зависимостей применительно к Flutter разработке. На практическом примере реализуем паттерн Dependency Injection во Flutter в примере приложения погоды. Затем узнаем, какие бывают тесты. Напишем unit-тесты, widget (UI-тесты) и интеграционные тесты для приложения с погодой.

Урок 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, где также есть тэги и <body>.</p><br/><p>Давайте немного увеличим текст и поиграем цветами:</p><br/><div style="text-align: center"><img src="/img/48781701/image6_5e52d17e0d0deb000743c0c0_jpg.jpeg"></img></div><br/><p>Виджету Scaffold мы задали красный фон, а виджету текста применили стиль, чтобы сделать его больше и заметнее.</p><br/><div style="text-align: center"><img src="/img/48781701/image7_5deb7c925dd0420006b8e94b_jpg.jpeg"></img></div><p>Привет, Мир! на Андроид</p><br/><p>Преимущество Flutter в том, что вся логика работы с внешним видом приложения (UI) прописывается в коде на том же языке, что и бизнес-логика – на dart. Нет необходимости залезать в папку с ресурсами и редактировать xml верстку.</p></section><section><p>Запускаем Hello World на iOS</p><p>Мы же пишем кроссплатформенный код! Давайте запустим созданное приложение на iOS-девайсе. Для этого просто выберите подключенный iOS-девайс или эмулятор в dropdown-списке и нажмите «Запустить».</p><br/><div style="text-align: center"><img src="/img/48781701/image8_5de8124336ab3e7a9d1c11d1_jpg.jpeg"></img></div><p>Выбор эмулятора iOS</p><br/><div style="text-align: center"><img src="/img/48781701/image9_5deb7cda5dd0420006b8e969_jpg.jpeg"></img></div><p>Привет, Мир! на iOS</p><br/><p>Экран выглядит потрясающе, однако вверху экрана мешается ненужная иконка debug, да и иконка приложения сейчас никакая. Исправим это.</p><p>Для того, чтобы убрать ленточку debug, в добавьте в MaterialApp флаг <em>debugShowCheckedModeBanner</em> со значением false</p><strong>return MaterialApp (</strong><strong>debugShowCheckedModeBanner: false,</strong><p>Чтобы поменять иконку, нужно добавить в pubspec. yaml пакет</p><strong>dev_dependencies:</strong><strong> flutter_launcher_icons: ^0.7.4</strong><p>Этот пакет значительно упростит нам добавление иконки для двух платформ сразу. Добавим теперь в корне проекта папку assets с иконкой, а также пропишем путь к иконке</p><strong>flutter_icons:</strong><strong> android: «launcher_icon»</strong><strong> ios: true</strong><strong> image_path: «assets/icons/flyflutter_ic_512.webp»</strong><p>не забудьте сказать flutter, чтобы смотрел папочку assets</p><strong>flutter:</strong><strong>uses-material-design: true</strong><strong>assets:</strong><strong>– assets/</strong><strong>– assets/icons/</strong><p>После этого для генерации иконок запустите в терминале команды</p><strong>flutter pub get</strong><strong>flutter pub run flutter_launcher_icons: main</strong><p>Чтобы поменять лейбл (название иконки) приложения:</p><p>Для Android – найдите манифест в android/app/src/main/AndroidManifest. xml и добавьте в тег application строку</p><em><strong>android: label=«FlyFlutter»</strong></em><p>Для iOS же зайдите в Info.plist по пути ios>runner/Info.plist и для ключа укажите имя <strong>CFBundleName</strong></p><em><strong><key> CFBundleName </key></strong></em><em><strong><string> FlyFlutter </string></strong></em><p>Готово. Запустите снова для проверки.</p></section></section><section><p>Урок 2. Язык программирования Dart</p><p><strong>В этой главе:</strong></p><p>– Переменные, типы и область видимости</p><p>– Функции</p><p>– Конструкторы</p><p>– Наследование</p><p>– Примеси (mixin)</p><p>– Callable классы</p><p>– Дженерики</p><p>– Асинхронные функции</p><p>– Исключения</p><p>– Использование библиотек</p><p>– Компиляция</p><section><p>Введение</p><p>Приложения под Flutter пишутся на языке Dart. Даже сам фреймворк написан на нем. Dart – это высокоуровневый объектно-ориентированный язык программирования общего назначения с открытым исходным кодом. Был разработан в Google. Испытал влияние C, Javascript, C#, Java. В нем также как и в Java и C# присутствует garbage collector. Язык поддерживает интерфейсы, примеси (англ. Mixin), абстрактные классы, дженерики и статическую типизацию.</p><p>Dart был представлен публике в 2011 году авторами Ларсом Барком (Lars Bark) и Каспером Лундом (Kasper Lund). Релиз версии 1.0 состоялся в 2013 году, а версии 2.0 в 2018</p><p>Примечание: Здесь и далее в этом курсе мы рассматриваем Dart версии 2</p><p>Все приложения на Dart, как и на C и в Java, имеют точку входа в функции main ()</p><br/><div style="text-align: center"><img src="/img/48781701/image10_5e4c3035520d0c000604f18c_jpg.jpeg"></img></div><br/><p>В случае, если необходимо запустить программу на Dart из командной строки, то можно использовать параметризованную main:</p><br/><div style="text-align: center"><img src="/img/48781701/image11_5e52d1a30d0deb000743c0d5_jpg.jpeg"></img></div></section><section><p>Переменные, типы и область видимости</p><p>Dart типобезопасный язык. В нем используется как статическая типизация на этапе компиляции, так и динамическая проверка во времени исполнения (runtime) программы. Несмотря на наличие статической типизации, указывать тип переменной необязательно. Например, все объявления и инициализации ниже корректные:</p><br/><div style="text-align: center"><img src="/img/48781701/image12_5e4c48ec0d0deb000741e4fd_jpg.jpeg"></img></div><br/><p>Примечание: В Dart 2 ключевое слово <strong>new</strong> стало необязательным</p></section><section><p>Видимость</p><p>По умолчанию, все переменные имеют публичную область видимости. Таких привычных для Java-программистов ключевых слов, как private, protected и public в Dart нет.</p><p>Однако если добавить нижнее подчеркивание [_] к имени переменной, такая переменная будет иметь область видимости библиотеки, в которой она находится.</p></section><section><p>Типы</p><p>Все объекты в Dart наследуются от базового типа Object. Это аналог Object в Java. В нем также есть метод hasCode () и аналог equals, который заменяет оператор сравнения ==</p><p>Так же в классе Object присутствует метод toString ()</p><p><em>Встроенные типы</em> включают:</p><p>– Числовые (num и его наследники int и double)</p><p>– Строковые (strings)</p><p>– Булевы (Booleans)</p><p>– Списки, или массивы (list)</p><p>– Сеты (set)</p><p>– Мапы (map)</p><p>– Руны (for expressing Unicode characters in a string)</p><p>– Символы (symbols)</p><br/><p><strong>int</strong> – Целочисленные переменные. На виртуальной машине Dart диапазон составляет от -263 до 263—1</p><p>Примечание: При компиляции в JavaScript диапазон int-a -253 до 253—1</p><p><strong>double</strong> – 64-битные числа с плавающей запятой</p><p>И <strong>int</strong> и <strong>double</strong> наследуются от типа <strong>num</strong></p><br/><p><strong>String</strong></p><p>Строковые переменные в Dart представляют собой последовательности из UTF-16 символов. Для инициализации можно использовать как двойные, так и одинарные кавычки:</p><br/><div style="text-align: center"><img src="/img/48781701/image13_5e4c36692aedf9000cb9b170_jpg.jpeg"></img></div><br/><p>Значения переменных можно использовать в строках с помощью конструкции $ {выражение}</p><br/><div style="text-align: center"><img src="/img/48781701/image14_5e4c369c2aedf9000cb9b193_jpg.jpeg"></img></div><br/><p><strong>bool</strong></p><p>Для создания булевых переменных в Dart существует ключевое слово bool. При инициализации можно использовать литералы true и false. То есть, инициализация bool b = 0; – некорректна, правильно</p><br/><div style="text-align: center"><img src="/img/48781701/image15_5e4c36bb520d0c000604f47d_jpg.jpeg"></img></div><br/><p><strong>List</strong></p><p>Списки – это коллекции проиндексированных объектов. Примеры объявления и инициализации списков:</p><br/><div style="text-align: center"><img src="/img/48781701/image16_5e4c32b10d0deb000741db67_jpg.jpeg"></img></div><br/><p>Для инициализации в Dart 2.3 добавлен спред оператор – троеточие – с помощью него можно добавить в список множество значений:</p><br/><div style="text-align: center"><img src="/img/48781701/image17_5e4c32dd0d0deb000741db91_jpg.jpeg"></img></div><br/><p><strong>Sets</strong></p><p>Сеты – это неупорядоченные наборы уникальных элементов. В Dart для того, чтобы создать сет, нужно использовать фигурные скобки для непустого набора и фигурные скобки в сочетании с угловыми и типом объектов для пустого:</p><br/><div style="text-align: center"><img src="/img/48781701/image18_5e4c36d3520d0c000604f48b_jpg.jpeg"></img></div><br/><p><strong>Maps</strong></p><p>Мапы – это наборы данных в формате ключ-значение. Ключами, как и значениями, могут быть объекты любых типов. Каждый ключ является уникальным, значения могут быть разными, а могут дублироваться. Посмотрим на примере:</p><br/><div style="text-align: center"><img src="/img/48781701/image19_5e4c36f8520d0c000604f4a6_jpg.jpeg"></img></div><br/><p>Альтернативные способы инициализации</p><br/><div style="text-align: center"><img src="/img/48781701/image20_5e4c3709520d0c000604f4ad_jpg.jpeg"></img></div><br/><p><strong>Runes</strong></p><p>Dart поддерживает руны – спецсимволы юникод. Используйте, если хотите добавить смайлики. Попробуйте запустить в dartpad</p><br/><div style="text-align: center"><img src="/img/48781701/image21_5e4c371d520d0c000604f4ba_jpg.jpeg"></img></div></section><section><p>final и const</p><p>В языке также присутствуют ключевые слова final и const.</p><p>Если переменную не планируется изменять, то следует задать ей модификатор final перед типом или словом var. Такая переменная может быть проинициализирована единожды. Переменные const неявно считаются final. Такие переменные используются для задания констант на этапе компиляции.</p></section><section><p>Функции</p><p>В Dart даже функции являются объектами. Это значит, что функции можно назначать переменным и передавать в качестве аргументов в другие функции. Тип возвращаемого значения указывается перед именем функции. Делать это необязательно, хотя и рекомендуется:</p><br/><div style="text-align: center"><img src="/img/48781701/image22_5e4c37400d0deb000741ddaf_jpg.jpeg"></img></div><br/><p>Поскольку эта функция содержит всего одно выражение, ее можно укоротить до одной строчки:</p><br/><div style="text-align: center"><img src="/img/48781701/image23_5e4c37592aedf9000cb9b1ff_jpg.jpeg"></img></div><br/><p>Оператор => -это сокращение фигурных скобок и слова return.</p><br/><p><strong>Опциональные параметры</strong></p><br/><p>При объявлении функции мы можем в ее сигнатуре указать значения по умолчанию. Например, нам понадобится вызывать какую-то функцию много раз с одним и тем же параметром, но при этом необходимо сохранить гибкость. В таком случае, при вызове функции с параметром по умолчанию его (этот параметр) можно не указывать.</p><p>В Dart существует два типа опциональных параметров: позиционные и именованные. Рассмотрим их подробнее.</p></section></section><section><p>Конец ознакомительного фрагмента.</p></div></div><div class="PaginationBlock_paginationBlock__ESqX_ PaginationBlock_paginationBlock_bottom__LljhQ"><div class="PaginationBlock_paginationBlock__pages__KDW6d"><div><div class="Pagination_pagination__thWr5 Pagination_pagination_noMargin__QOW6m"><a class="Pagination_active__FIUxq" href="/online/154754/1">1</a><a class="Pagination_pagination__link__innVr" href="/online/154754/2">2</a><a class="Next_next__5tJXc" href="/online/154754/2">></a></div></div></div><div><div><div class="PaginationBlock_pagesInput__controls__OQi14"><span class="PaginationBlock_pagesInput__txt__wP7Er">На страницу:</span><div class="PaginationBlock_pagesInput__input__5EMpR"><input data-page-go-input="true" class="PaginationBlock_formInput__field__BCaW4" name="page-number" type="number" min="1" max="2" placeholder="1" value="1"/></div><div class="PaginationBlock_pagesInput__btn__iKpTu"><a data-page-go-button="true" class="PaginationBlock_paginationBlock__btn__7ClWN" href="/online/154754/1">Перейти</a></div><div class="PaginationBlock_pagesInput__count__CTnof"><span data-current-page="{{ currentPage }}">1</span> из <span data-total-pages="{{ totalPages }}">2</span></div></div></div></div></div></div><div class="Layout_mainContainer__bottomBanner__qtLRD"><div class="undefined FooterBanner_rtbBanner_desktop__MTpQ6"><div id="yandex_rtb_R-A-745629-5"></div></div><div class="undefined FooterBanner_rtbBanner_mobile__4OC92"><div id="yandex_rtb_R-A-745629-4"></div></div></div></div><div class="Layout_mobileOverlay__PjzPa"></div></main><div class="StickyBanner_sticky_banner__NC2R_ " data-sticky-banner="true"><div class="StickyBanner_sticky_banner_btn__RQPM3" data-sticky-banner-btn="true"></div><div class="StickyBanner_sticky_banner_wrap__tQTE_"><div id="yandex_rtb_R-A-745629-6"></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"book":{"id":154754,"book_id":264856,"alias":"154754","views_count":582,"comments_count":0,"rating":0,"voted_users":0,"type":"book","genres":[{"id":6487,"parent_id":5024,"title":"книги о компьютерах","alias":"knigi_o_kompyuterah"}],"author":{"id":54975,"alias":"andrey-aleev","views_count":881,"comments_count":0,"books_count":1,"status":"active","first_name":"Андрей","middle_name":"","last_name":"Алеев"},"tags":[],"series":[],"book":{"id":264856,"author_id":87080,"external_id":48781701,"external_uid":"ae5fbeca-0b70-4a15-b2f4-e9eb0b9a4b04","title":"Быстрый старт Flutter-разработчика","alias":"bystryi-start-flutter-razrabotchika","description":"В этой книге даны необходимые элементы, база, которую нужно знать Flutter-разработчику, чтобы писать кросс-платформенные мобильные приложения под Android и iOS на языке Dart. Все это представлено в наглядной форме, на практических примерах, в формате уроков. После их освоения вы сможете именовать себя Flutter-разработчиком.\n\nFlutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.\n","type":"book","lang":"ru","src_lang":"ru","year":2019,"publish_year":null,"publish_city":null,"pub_date":"2019-12-16T00:00:00","publisher":null,"release_date":null,"photo":null,"allow_full_free":0,"has_trial":4,"price":null,"hot":0,"isbn":null,"audio_url":null,"genres":[{"id":6487,"parent_id":5024,"title":"книги о компьютерах","alias":"knigi_o_kompyuterah"}]},"files":[],"created_at":"2020-03-26T17:33:06","reader":null,"draft":null,"hide_litres_data":false,"other_author_books":[]},"read":{"page":1,"pages":2,"type":"fb2","content":"\u003cp\u003e\u003c/p\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/cover.jpg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eБыстрый старт Flutter-разработчика\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eАндрей Алеев\u003c/p\u003e\u003csection\u003e\u003cp\u003e© Андрей Алеев, 2020\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eISBN 978-5-0050-8797-3\u003c/p\u003e\u003cp\u003eСоздано в интеллектуальной издательской системе Ridero\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eВведение\u003c/p\u003e\u003csection\u003e\u003cp\u003eНачиная с 2015 года, с момента анонсирования Flutter SDK, популярность этой платформы и языка Dart растет неукоснительно. На популярных профильных ресурсах нарастает количество статей по данной тематике, а многие компании выпускают в магазины приложения, созданные с помощью FlutterTM.\u003c/p\u003e\u003cp\u003eЦель данной книги – научить вас создавать кроссплатформенные мобильные приложения под Android и iOS на Flutter. На практических примерах мы разберем основы языка Dart и базовые принципы построения Flutter-приложений.\u003c/p\u003e\u003cp\u003eКнига будет интересна нативным мобильным разработчикам, которые уже занимаются разработкой приложений, а также всем, кто желает начать писать кроссплатформенные мобильные приложения и познакомиться с языком Dart. Необходимы только базовые знания по программированию. Опыт front-end-разработки придется очень кстати – с ним материал курса будет освоить гораздо проще. Тем не менее, иметь его совсем не обязательно, тем более что после освоения этой книги вы будете на один большой шаг ближе к тому, чтобы именоваться мастером front-end-девелопмента.\u003c/p\u003e\u003cp\u003eУченые из Оксфордского университета выяснили, что всего лишь 400 слов покрывают 75% всех английских текстов. Это означает, что со словарным запасом в 400 самых используемых слов вы в трех случаях из четырех будете знать, о чем идет речь в любом тексте. Аналогичным образом написана данная книга: она не претендует на звание учебника или полного справочника платформы Flutter и языка Dart. Мы не будем разбирать по очереди каждый из виджетов в библиотеке material, не будем заучивать все ключевые слова языка Dart. Наоборот, здесь даны самые необходимые элементы, минимум, который надо знать Flutter-разработчику в продакшн, то есть в приложении к решению настоящих задач: \u003cem\u003eсозданию мобильных приложений для реального мира.\u003c/em\u003e\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eКак работать с этой книгой\u003c/p\u003e\u003cp\u003eЛучше всего усваивается информация, полученная эмпирическим путем. Поэтому ожидается, что вы будете не просто пассивно читать эту книгу, а по каждому уроку напишете код и запустите приложение на двух платформах – Android и iOS.\u003c/p\u003e\u003cp\u003eВ идеале, постарайтесь написать свое приложение, которое будет, к примеру, загружать фотки котиков из сети или выполнять более утилитарную задачу, пусть калькулятор. На ваш вкус. В этой книге мы будем разбирать два примера – сначала создадим простой счетчик, а затем более сложный – загрузка прогноза погоды с сайта openweathermap.org. Если вы захотите написать такое же приложение, вам потребуется API KEY с их сайта, а также API KEY Google Maps. Помимо этого, желательно иметь опыт работы с Git, Android Studio, Gradle.\u003c/p\u003e\u003cp\u003eВсего в книге 10 глав-уроков, первые уроки более простые, последние – более сложные, и для них, возможно, потребуется больше времени. Помогать вам будет уже написанный и работающий код в репозитории проекта – https://github.com/acinonyxjubatus/flyflutter_fast_start – FlyFlutter Fast Start на гитхабе, там для каждого урока выделена своя ветка. Старайтесь не просто копировать оттуда код, а вдумчиво писать его, только лишь сверяясь с кодом на гитхабе. Ниже вкратце приведено описание уроков, а также указаны ссылки на соответствующие ветки репозитория.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 1. Запускаем Flutter \u003c/strong\u003e[ветка \u003cem\u003elesson_1_hello_world\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eНаучимся запускать проект на Flutter под Android и iOS, а также совершать простейшие манипуляции с виджетами. Помимо этого, узнаем чем может быть полезен Flutter и когда на нем можно создавать приложения.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 2. Язык программирования Dart\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eОбзорно пройдемся по основным возможностям и правилам языка Dart\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 3. StatelessWidget и StatefulWidget \u003c/strong\u003e[ветки \u003cem\u003elesson_3_1_stateless_widget, lesson_3_1_stateful_widget\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eНаучимся создавать Stateless и StatefulWidget-ы. Узнаем про состояния виджетов, попробуем ими манипулировать. Также узнаем, как декорировать и выравнивать виджеты.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 4. Создание списка элементов \u003c/strong\u003e[ветка \u003cem\u003elesson_4_listivew\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eПознакомимся с ListView, узнаем какие есть способы его создания. Полученные знания применим для создания списка с прогнозами погоды.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 5. Загрузка данных с сервера \u003c/strong\u003e[ветка \u003cem\u003elesson_5_http\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eУзнаем как можно выполнить асинхронную работу во Flutter. Сделаем запрос на сервер, получим, распарсим и покажем полученную информацию на клиенте. Таким образом, создадим полноценное клиент-серверное приложение.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 6. Inherited Widgets, Elements, Keys \u003c/strong\u003e[ветка \u003cem\u003elesson_6_inherited\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eУзнаем, что такое Inherited Widget, а также на примере посмотрим как он работает. Разоберемся с тем, что такое Element-ы и как они работают. Помимо этого, мы познакомимся с ключами Keys и узнаем когда и как их нужно использовать.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 7. Навигация между экранами, Работа с Google Maps \u003c/strong\u003e[ветка \u003cem\u003elesson_7_navigation_maps\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eНаучимся переключать экраны с помощью Navigator-а. Сможем подключить и показать карты от Google Maps в приложении, а также подключим дополнительный необходимый в примере пакет timezone.\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eУрок 8. SQLite, Clean Architecture \u003c/strong\u003e[ветка \u003cem\u003elesson_8_sqlite_clean_architecture\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eСумеем подключить SQLite и сохранить данные в локальной базе данных, а также прочесть их. Убедимся, что во Flutter тоже можно и нужно писать чистый код и напишем свою реализацию паттерна Repository.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 9. BLoC, Streams \u003c/strong\u003e[ветки \u003cem\u003elesson_9_bloc, lesson_9_1_counter_bloc\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eУзнаем, что такое BLoC, чем он полезен и как использовать библиотеку bloc. Все это применим на практике: мы произведем значительный рефакторинг приложения погоды, придав коду приличествующий вид – повысим читаемость и поддерживаемость.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eУрок 10. DI, Тесты \u003c/strong\u003e[ветки \u003cem\u003elesson_10_di_tests, lesson_9_1_counter_bloc\u003c/em\u003e]\u003c/p\u003e\u003cp\u003eОсвоим технику инверсии зависимостей применительно к Flutter разработке. На практическом примере реализуем паттерн Dependency Injection во Flutter в примере приложения погоды. Затем узнаем, какие бывают тесты. Напишем unit-тесты, widget (UI-тесты) и интеграционные тесты для приложения с погодой.\u003c/p\u003e\u003c/section\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eУрок 1. Запускаем Flutter\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eВ этой главе:\u003c/strong\u003e\u003c/p\u003e\u003cp\u003e– Кроссплатформенная мобильная разработка\u003c/p\u003e\u003cp\u003e– Почему Flutter?\u003c/p\u003e\u003cp\u003e– Настраиваем рабочее окружение\u003c/p\u003e\u003cp\u003e– Запускаем Hello World на Android\u003c/p\u003e\u003cp\u003e– Запускаем Hello World на iOS\u003c/p\u003e\u003csection\u003e\u003cp\u003eКроссплатформенная мобильная разработка\u003c/p\u003e\u003cp\u003eДля начала несколько слов о том, что такое Flutter и зачем он нам нужен. Если вы знаете ответ на вопрос, что такое кроссплатформенная разработка и Flutter, листайте дальше к пункту 3 этой главы: «Настройка рабочего окружения».\u003c/p\u003e\u003cp\u003eТак вышло, что на сегодняшний день в мире мобильных устройств лидируют 2 платформы – iOS от Apple и Google Android. Представьте, что вам прямо сейчас надо написать мобильное приложение под обе операционные системы. Вам нужно нанять, условно, по 1—3 программиста на каждую платформу. Или по 5, или по 7, в зависимости от сложности проекта.\u003c/p\u003e\u003cp\u003eВозьмем число 5 на платформу – оптимальное, на мой взгляд, количество для проекта средней сложности. Это означает 10 программистов в сумме. Из них статистически будет 2—4 очень хороших, сильных программиста, 2—4 слабеньких и 2—4 средних по уровню. Если же язык программирования один и кодовая база одна, значит, можно взять из этих же 10 программистов 5 лучших. Конечно, останется 5 программистов не у дел, но это возможность переместить их на другие участки работы или дополнительный стимул расти им профессионально. Иными словами, сузив скоуп работ до одной кодовой базы, можно одновременно уменьшить расходы на разработку и увеличить качество. Конечно, это все теория. На практике большинство выбирают нативную разработку, и зачастую оправдано, поскольку только она дает максимальное качество конечного продукта. Но зачастую – не значит всегда. Рассмотрим, когда и как можно применить Flutter.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eПочему Flutter?\u003c/p\u003e\u003cp\u003eЕсли Вы думаете, стоит ли Вам браться за кросс-платформу и конкретно за Flutter, ответьте себе на вопрос: зачем нам нужно это приложение, какие бизнес-цели мы с помощью него решаем? Сравните свой ответ с двумя абзацами ниже и решите к какому относится ваше приложение в большей степени.\u003c/p\u003e\u003cp\u003eДля начала определим, в каких случаях Flutter не очень хорошо подходит. Если кратко, то это все кейсы, когда приложение \u003cem\u003eпредставляет собой конечный продукт\u003c/em\u003e и будет конкурировать с другими такими продуктами в магазине приложений за топовые позиции. Например, это может быть новая Angry Birds, рисовалка, читалка, фитнес-приложение. Вам нужна будет максимальная скорость, точность и плавность при работе приложения, и это все на сегодняшний день дает только нативное приложение. Также следует выделить категорию приложений, в которых планируется активно использовать встроенные в устройства датчики, такие как Bluetooth, гироскопы, камеру. Это конечно, не значит, что Flutter нельзя использовать в перечисленных случаях. Но высока вероятность, что вам так или иначе придется писать нативный код и/или костыли.\u003c/p\u003e\u003cp\u003eС другой стороны, существует множество кейсов, когда реальный бизнес желает получить мобильное приложение, которое будет помогать им в реализации бизнес-процессов и/или дополнять их, но без фанатичной погони за самым модным UI и супер-быстродействием. В качестве примера можно привести программы лояльности, мобильное рабочее место для сотрудников, интернет-магазин, а также многие другие, где приложение будет \u003cem\u003eобслуживать реальный бизнес-процесс\u003c/em\u003e.\u003c/p\u003e\u003cp\u003eРезюмируя, небольшие приложения с оффлайновым бизнесом можно и нужно создавать на Flutter, а сам framework рекомендуется к изучению всем мобильным разработчикам.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eНастраиваем рабочее окружение\u003c/p\u003e\u003cp\u003eТеперь, когда мы разобрались, в каких случаях мы можем использовать Flutter, давайте уже научимся им пользоваться!\u003c/p\u003e\u003cp\u003eДля начала установим Flutter SDK. Скачайте архив с SDK с официального сайта (https://flutter.dev/docs/get-started/install). Выберите вашу платформу (Windows, Mac, Linux) и следуйте инструкции.\u003c/p\u003e\u003cp\u003eПосле распаковки архива добавьте в PATH Flutter/bin\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eexport PATH=«$PATH:`pwd`/flutter/bin» // Maс\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eЗдесь может потребоваться перезапустить компьютер.\u003c/p\u003e\u003cp\u003eПосле установки в командной строке запустите команду\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eflutter doctor\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eи убедитесь, что у вас все установлено корректно.\u003c/p\u003e\u003cp\u003eЕсли планируете собирать и тестировать под iOS, то необходимо установить и обновить Xcode и соответствующие пакеты с помощью brew, следуя подсказке в ответе flutter doctor, а также следовать инструкции для macos https://flutter.dev/docs/get-started/install/macos)\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image0_5de8125036ab3e7a9d1c11e3_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРезультаты команды flutter doctor с ошибками\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли планируете тестировать на Android-устройстве, то используйте Android Studio. Если у вас нет Android Studio, следуйте инструкции по установке (https://developer.android.com/studio/install), чтобы установить ее.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eЗапускаем Hello World! На Android\u003c/p\u003e\u003cp\u003eИтак, приступим к созданию первого приложения на Flutter. Для этого курса вы также можете использовать Android Studio, XCode или VS Code – как вам удобно. Мы будем рассматривать на примере Android Studio.\u003c/p\u003e\u003cp\u003eЗапустите Android Studio и выберите \u003cem\u003eStart a new Flutter project.\u003c/em\u003e\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image1_5de8124e36ab3e7a9d1c11e0_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eИнтерфейс создания нового проекта\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eВыберите \u003cstrong\u003eFlutter Application\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eЗаполните имя \u003cem\u003eflutter_hello_world\u003c/em\u003e в поле \u003cstrong\u003eProject Name\u003c/strong\u003e\u003c/p\u003e\u003cp\u003ecompany domain – \u003cstrong\u003eflyflutter.ru\u003c/strong\u003e – и жмем Finish.\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПосле запуска мы сразу видим открытый файл \u003cstrong\u003emain. dart\u003c/strong\u003e В нем – видим строчку\u003c/p\u003evoid main () =\u003e runApp (MyApp ());\u003cp\u003eэто начальная точка приложения. Функция \u003cstrong\u003emain ()\u003c/strong\u003e – это стартовая точка всех приложений на языке Dart. В ней мы здесь вызываем конструктор класса \u003cstrong\u003eMyApp\u003c/strong\u003e, который наследуется от \u003cstrong\u003eStatelessWidget\u003c/strong\u003e – это тип UI компонента – виджета. Подробнее про язык Dart мы поговорим во второй лекции, а про виджеты – в третьей.\u003c/p\u003e\u003cp\u003eИтак, слева мы видим дерево проекта, справа – редактор.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image2_5de8124a36ab3e7a9d1c11dd_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eКод main. dart только что созданного проекта\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eВесь общий для Android и iOS код находится в папке lib. Сейчас у нас там только файл main. dart\u003c/p\u003e\u003cp\u003eAndroid Studio сгенерировала простую логики инкрементирования счетчика, мы ее пока удалим, чтобы она нас не путала, и заменим на более простой вариант\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image3_5e52d1652aedf9000cbb9479_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eЖмите на иконку молнии – \u003cstrong\u003eHot Reload\u003c/strong\u003e – для применения изменений.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image4_5df14a41924f860007a7d1a4_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eНадо отметить, что Hot Reload во Flutter работает действительно быстро и значительно сокращает время разработки.\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eУра, на экране вы должны увидеть «Привет, Мир!».\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image5_5de8124636ab3e7a9d1c11d7_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003e«Привет, Мир!» на эмуляторе\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eРассмотрим код подробнее. Как уже говорилось выше, MyApp наследуется от StatelessWidget, это неизменяемый UI компонент-виджет. Вообще, все во Flutter – это виджеты, и приложение тоже. В виджете мы переопределяем метод build, в котором указывается, что и как отрисовать.\u003c/p\u003e\u003cp\u003eВ нашем примере мы возвращаем объект MaterialApp, который создаем посредством конструктора. А в конструктор передаем название, тему и виджет home, которому назначаем Scaffold – скелет приложения, который в свою очередь содержит appBar и body. Здесь уместна аналогия с HTML, где также есть тэги \u003ctitle\u003e и \u003cbody\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eДавайте немного увеличим текст и поиграем цветами:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image6_5e52d17e0d0deb000743c0c0_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eВиджету Scaffold мы задали красный фон, а виджету текста применили стиль, чтобы сделать его больше и заметнее.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image7_5deb7c925dd0420006b8e94b_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eПривет, Мир! на Андроид\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПреимущество Flutter в том, что вся логика работы с внешним видом приложения (UI) прописывается в коде на том же языке, что и бизнес-логика – на dart. Нет необходимости залезать в папку с ресурсами и редактировать xml верстку.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eЗапускаем Hello World на iOS\u003c/p\u003e\u003cp\u003eМы же пишем кроссплатформенный код! Давайте запустим созданное приложение на iOS-девайсе. Для этого просто выберите подключенный iOS-девайс или эмулятор в dropdown-списке и нажмите «Запустить».\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image8_5de8124336ab3e7a9d1c11d1_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eВыбор эмулятора iOS\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image9_5deb7cda5dd0420006b8e969_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eПривет, Мир! на iOS\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЭкран выглядит потрясающе, однако вверху экрана мешается ненужная иконка debug, да и иконка приложения сейчас никакая. Исправим это.\u003c/p\u003e\u003cp\u003eДля того, чтобы убрать ленточку debug, в добавьте в MaterialApp флаг \u003cem\u003edebugShowCheckedModeBanner\u003c/em\u003e со значением false\u003c/p\u003e\u003cstrong\u003ereturn MaterialApp (\u003c/strong\u003e\u003cstrong\u003edebugShowCheckedModeBanner: false,\u003c/strong\u003e\u003cp\u003eЧтобы поменять иконку, нужно добавить в pubspec. yaml пакет\u003c/p\u003e\u003cstrong\u003edev_dependencies:\u003c/strong\u003e\u003cstrong\u003e flutter_launcher_icons: ^0.7.4\u003c/strong\u003e\u003cp\u003eЭтот пакет значительно упростит нам добавление иконки для двух платформ сразу. Добавим теперь в корне проекта папку assets с иконкой, а также пропишем путь к иконке\u003c/p\u003e\u003cstrong\u003eflutter_icons:\u003c/strong\u003e\u003cstrong\u003e android: «launcher_icon»\u003c/strong\u003e\u003cstrong\u003e ios: true\u003c/strong\u003e\u003cstrong\u003e image_path: «assets/icons/flyflutter_ic_512.webp»\u003c/strong\u003e\u003cp\u003eне забудьте сказать flutter, чтобы смотрел папочку assets\u003c/p\u003e\u003cstrong\u003eflutter:\u003c/strong\u003e\u003cstrong\u003euses-material-design: true\u003c/strong\u003e\u003cstrong\u003eassets:\u003c/strong\u003e\u003cstrong\u003e– assets/\u003c/strong\u003e\u003cstrong\u003e– assets/icons/\u003c/strong\u003e\u003cp\u003eПосле этого для генерации иконок запустите в терминале команды\u003c/p\u003e\u003cstrong\u003eflutter pub get\u003c/strong\u003e\u003cstrong\u003eflutter pub run flutter_launcher_icons: main\u003c/strong\u003e\u003cp\u003eЧтобы поменять лейбл (название иконки) приложения:\u003c/p\u003e\u003cp\u003eДля Android – найдите манифест в android/app/src/main/AndroidManifest. xml и добавьте в тег application строку\u003c/p\u003e\u003cem\u003e\u003cstrong\u003eandroid: label=«FlyFlutter»\u003c/strong\u003e\u003c/em\u003e\u003cp\u003eДля iOS же зайдите в Info.plist по пути ios\u003erunner/Info.plist и для ключа укажите имя \u003cstrong\u003eCFBundleName\u003c/strong\u003e\u003c/p\u003e\u003cem\u003e\u003cstrong\u003e\u003ckey\u003e CFBundleName \u003c/key\u003e\u003c/strong\u003e\u003c/em\u003e\u003cem\u003e\u003cstrong\u003e\u003cstring\u003e FlyFlutter \u003c/string\u003e\u003c/strong\u003e\u003c/em\u003e\u003cp\u003eГотово. Запустите снова для проверки.\u003c/p\u003e\u003c/section\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eУрок 2. Язык программирования Dart\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eВ этой главе:\u003c/strong\u003e\u003c/p\u003e\u003cp\u003e– Переменные, типы и область видимости\u003c/p\u003e\u003cp\u003e– Функции\u003c/p\u003e\u003cp\u003e– Конструкторы\u003c/p\u003e\u003cp\u003e– Наследование\u003c/p\u003e\u003cp\u003e– Примеси (mixin)\u003c/p\u003e\u003cp\u003e– Callable классы\u003c/p\u003e\u003cp\u003e– Дженерики\u003c/p\u003e\u003cp\u003e– Асинхронные функции\u003c/p\u003e\u003cp\u003e– Исключения\u003c/p\u003e\u003cp\u003e– Использование библиотек\u003c/p\u003e\u003cp\u003e– Компиляция\u003c/p\u003e\u003csection\u003e\u003cp\u003eВведение\u003c/p\u003e\u003cp\u003eПриложения под Flutter пишутся на языке Dart. Даже сам фреймворк написан на нем. Dart – это высокоуровневый объектно-ориентированный язык программирования общего назначения с открытым исходным кодом. Был разработан в Google. Испытал влияние C, Javascript, C#, Java. В нем также как и в Java и C# присутствует garbage collector. Язык поддерживает интерфейсы, примеси (англ. Mixin), абстрактные классы, дженерики и статическую типизацию.\u003c/p\u003e\u003cp\u003eDart был представлен публике в 2011 году авторами Ларсом Барком (Lars Bark) и Каспером Лундом (Kasper Lund). Релиз версии 1.0 состоялся в 2013 году, а версии 2.0 в 2018\u003c/p\u003e\u003cp\u003eПримечание: Здесь и далее в этом курсе мы рассматриваем Dart версии 2\u003c/p\u003e\u003cp\u003eВсе приложения на Dart, как и на C и в Java, имеют точку входа в функции main ()\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image10_5e4c3035520d0c000604f18c_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eВ случае, если необходимо запустить программу на Dart из командной строки, то можно использовать параметризованную main:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image11_5e52d1a30d0deb000743c0d5_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eПеременные, типы и область видимости\u003c/p\u003e\u003cp\u003eDart типобезопасный язык. В нем используется как статическая типизация на этапе компиляции, так и динамическая проверка во времени исполнения (runtime) программы. Несмотря на наличие статической типизации, указывать тип переменной необязательно. Например, все объявления и инициализации ниже корректные:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image12_5e4c48ec0d0deb000741e4fd_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eПримечание: В Dart 2 ключевое слово \u003cstrong\u003enew\u003c/strong\u003e стало необязательным\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eВидимость\u003c/p\u003e\u003cp\u003eПо умолчанию, все переменные имеют публичную область видимости. Таких привычных для Java-программистов ключевых слов, как private, protected и public в Dart нет.\u003c/p\u003e\u003cp\u003eОднако если добавить нижнее подчеркивание [_] к имени переменной, такая переменная будет иметь область видимости библиотеки, в которой она находится.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eТипы\u003c/p\u003e\u003cp\u003eВсе объекты в Dart наследуются от базового типа Object. Это аналог Object в Java. В нем также есть метод hasCode () и аналог equals, который заменяет оператор сравнения ==\u003c/p\u003e\u003cp\u003eТак же в классе Object присутствует метод toString ()\u003c/p\u003e\u003cp\u003e\u003cem\u003eВстроенные типы\u003c/em\u003e включают:\u003c/p\u003e\u003cp\u003e– Числовые (num и его наследники int и double)\u003c/p\u003e\u003cp\u003e– Строковые (strings)\u003c/p\u003e\u003cp\u003e– Булевы (Booleans)\u003c/p\u003e\u003cp\u003e– Списки, или массивы (list)\u003c/p\u003e\u003cp\u003e– Сеты (set)\u003c/p\u003e\u003cp\u003e– Мапы (map)\u003c/p\u003e\u003cp\u003e– Руны (for expressing Unicode characters in a string)\u003c/p\u003e\u003cp\u003e– Символы (symbols)\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eint\u003c/strong\u003e – Целочисленные переменные. На виртуальной машине Dart диапазон составляет от -263 до 263—1\u003c/p\u003e\u003cp\u003eПримечание: При компиляции в JavaScript диапазон int-a -253 до 253—1\u003c/p\u003e\u003cp\u003e\u003cstrong\u003edouble\u003c/strong\u003e – 64-битные числа с плавающей запятой\u003c/p\u003e\u003cp\u003eИ \u003cstrong\u003eint\u003c/strong\u003e и \u003cstrong\u003edouble\u003c/strong\u003e наследуются от типа \u003cstrong\u003enum\u003c/strong\u003e\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eString\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eСтроковые переменные в Dart представляют собой последовательности из UTF-16 символов. Для инициализации можно использовать как двойные, так и одинарные кавычки:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image13_5e4c36692aedf9000cb9b170_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eЗначения переменных можно использовать в строках с помощью конструкции $ {выражение}\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image14_5e4c369c2aedf9000cb9b193_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003ebool\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eДля создания булевых переменных в Dart существует ключевое слово bool. При инициализации можно использовать литералы true и false. То есть, инициализация bool b = 0; – некорректна, правильно\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image15_5e4c36bb520d0c000604f47d_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eList\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eСписки – это коллекции проиндексированных объектов. Примеры объявления и инициализации списков:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image16_5e4c32b10d0deb000741db67_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eДля инициализации в Dart 2.3 добавлен спред оператор – троеточие – с помощью него можно добавить в список множество значений:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image17_5e4c32dd0d0deb000741db91_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eSets\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eСеты – это неупорядоченные наборы уникальных элементов. В Dart для того, чтобы создать сет, нужно использовать фигурные скобки для непустого набора и фигурные скобки в сочетании с угловыми и типом объектов для пустого:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image18_5e4c36d3520d0c000604f48b_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eMaps\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eМапы – это наборы данных в формате ключ-значение. Ключами, как и значениями, могут быть объекты любых типов. Каждый ключ является уникальным, значения могут быть разными, а могут дублироваться. Посмотрим на примере:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image19_5e4c36f8520d0c000604f4a6_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eАльтернативные способы инициализации\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image20_5e4c3709520d0c000604f4ad_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eRunes\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eDart поддерживает руны – спецсимволы юникод. Используйте, если хотите добавить смайлики. Попробуйте запустить в dartpad\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image21_5e4c371d520d0c000604f4ba_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003efinal и const\u003c/p\u003e\u003cp\u003eВ языке также присутствуют ключевые слова final и const.\u003c/p\u003e\u003cp\u003eЕсли переменную не планируется изменять, то следует задать ей модификатор final перед типом или словом var. Такая переменная может быть проинициализирована единожды. Переменные const неявно считаются final. Такие переменные используются для задания констант на этапе компиляции.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eФункции\u003c/p\u003e\u003cp\u003eВ Dart даже функции являются объектами. Это значит, что функции можно назначать переменным и передавать в качестве аргументов в другие функции. Тип возвращаемого значения указывается перед именем функции. Делать это необязательно, хотя и рекомендуется:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image22_5e4c37400d0deb000741ddaf_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eПоскольку эта функция содержит всего одно выражение, ее можно укоротить до одной строчки:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/48781701/image23_5e4c37592aedf9000cb9b1ff_jpg.jpeg\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cbr/\u003e\u003cp\u003eОператор =\u003e -это сокращение фигурных скобок и слова return.\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e\u003cstrong\u003eОпциональные параметры\u003c/strong\u003e\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПри объявлении функции мы можем в ее сигнатуре указать значения по умолчанию. Например, нам понадобится вызывать какую-то функцию много раз с одним и тем же параметром, но при этом необходимо сохранить гибкость. В таком случае, при вызове функции с параметром по умолчанию его (этот параметр) можно не указывать.\u003c/p\u003e\u003cp\u003eВ Dart существует два типа опциональных параметров: позиционные и именованные. Рассмотрим их подробнее.\u003c/p\u003e\u003c/section\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eКонец ознакомительного фрагмента.\u003c/p\u003e"},"reviews":{"total_count":0,"page":1,"page_size":5,"data":[]},"_sentryTraceData":"fbb74c039a5d4cdbb6fe51a7a266e5e7-a26bb2667e049d20-1","_sentryBaggage":"sentry-environment=production,sentry-release=jV5Wg2VfXYYa7eJHk3aMy,sentry-public_key=849376fd4c2a49839df4f34bdf204e56,sentry-trace_id=fbb74c039a5d4cdbb6fe51a7a266e5e7"},"__N_SSP":true},"page":"/online/[id]","query":{"id":"154754"},"buildId":"jV5Wg2VfXYYa7eJHk3aMy","isFallback":false,"gssp":true,"scriptLoader":[]}</script></body></html>