Основы Flutter - Станислав Чернышев - E-Book

Основы Flutter E-Book

Станислав Чернышев

0,0

Beschreibung

Книга предназначена для всех, кто хочет погрузиться в эффективную кроссплатформенную разработку с Flutter. Вы не только изучите синтаксис языка Dart и основы фреймворка, но и сразу примените знания на практике, разрабатывая проект, который развивается на протяжении всей книги. После каждой новой темы вас ждут задания по доработке его кодовой базы, что позволит уверенно прокачать свои hard-скиллы. Материал структурирован так, чтобы вы могли постепенно перейти от основ к созданию полноценных приложений для всех популярных платформ. Описаны не просто базовые принципы, но и лучшие практики, проверенные авторами в проектах для создания отзывчивых и современных интерфейсов. Особый подход с минимальным использованием внешних пакетов и упором на встроенные возможности Dart и Flutter обеспечивает долгую актуальность материала. Дополнительно прилагаются лабораторные практикумы, которые помогут закрепить теорию, а весь исходный код доступен в GitHub-репозитории.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern
Kindle™-E-Readern
(für ausgewählte Pakete)

Seitenzahl: 704

Veröffentlichungsjahr: 2025

Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:

Android
iOS
Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Станислав Чернышев, Юрий Петров, Станислав Ильин, Павел Гершевич

Основы Flutter. — СПб.: Питер, 2025.

ISBN 978-5-4461-4469-3

© ООО Издательство "Питер", 2025

Оглавление

Предисловие
Присоединяйся!
Как работать с книгой
От издательства
Глава 0. Установка и настройка рабочего окружения. Основы Dart
0.1. Установка и настройка рабочего окружения
0.2. Создание первого проекта на Dart
0.3. Базовые типы данных, модификаторы доступа и null-safety
0.4. Основные операторы и pattern matching
0.5. Управление потоком выполнения кода
0.6. Функции
0.7. Библиотеки
Проект: игра «Тетрис» v. 0
0.8. Объектно-ориентированное программирование
0.9. Exceptions (исключения)
0.10. Асинхронное программирование и изоляты
Проект: игра «Тетрис» v. 1
Резюме
Вопросы для самопроверки
Глава 1. Краткая история и принципы работы Flutter
1.1. Краткая история и основные нюансы
1.2. Как обстоят дела с разработкой под Web
1.3. Создание первого проекта и его запуск
1.4. Структура проекта на Flutter
1.5. Структура файла pubspec.yaml
1.6. Типы виджетов во Flutter
1.7. В недрах BuildContext
1.8. Передача информации по дереву элементов
1.9. Зачем нужны ключи
1.10. Жизненный цикл приложения
Резюме
Вопросы для самопроверки
Глава 2. Основные виджеты, их компоновка и работа с assets
2.1. Стили виджетов — Material vs Cupertino
2.2. Виджеты-«коробки»
2.3. Виджеты компоновки
2.4. Виджеты выбора и ввода данных
2.5. Виджеты кнопок
2.6. Виджеты отображения данных и работа с assets
2.7. Скроллируемые виджеты
2.8. Scaffold и его составные виджеты
Проект: игра «Тетрис» v.2. Портирование на Flutter
Резюме
Вопросы для самопроверки
Глава 3. Управление состоянием
3.1. Типы состояния приложения
3.2. Инструменты Flutter для работы с состоянием приложения
3.3. Паттерны для управления состоянием
Проект: игра «Тетрис» v.3. Переход на ChangeNotifier
Резюме
Вопросы для самопроверки
Глава 4. Навигация
4.1. Основные концепции навигации во Flutter
4.2. Основные элементы навигации во Flutter
4.3. Именованные маршруты
4.4. Навигация без контекста — GlobalKey и NavigatorState
4.5. Инструменты декларативной навигации
4.6. Передача информации между экранами
4.7. Вложенная навигация (nested navigation)
Проект: игра «Тетрис» v.4. Добавление навигации
Резюме
Вопросы для самопроверки
Глава 5. Работа с сетью
5.1. Клиент-серверная архитектура
5.2. Встроенный инструмент Flutter для работы с HTTP
5.3. Пакет (библиотека) HTTP
5.4. Веб-сокеты
Проект: игра «Тетрис» v.5. Работа с сетью
Резюме
Вопросы для самопроверки
Глава 6. Локальное хранение данных
6.1. SharedPreferences
6.2. Secure Storage
6.3. SQLite
Проект: игра «Тетрис» v.6. Сохранение, кэширование данных и игра без Интернета
Резюме
Вопросы для самопроверки
Глава 7. Тестирование приложений
7.1. Теория тестирования
7.2. Unit-тесты
7.3. Виджет-тесты
7.4. Асинхронные виджет-тесты
7.5. Интеграционные тесты
Проект: игра «Тетрис» v.7. Тестирование
Резюме
Вопросы для самопроверки
Глава 8. Локализация приложения
8.1. Интернационализация vs локализация
8.2. Подключение и настройка библиотеки flutter_localizations
8.3. Интерполяция строк (placeholder)
8.4. Плюрализация строк (plural)
8.5. Еще один механизм плюрализации (select)
8.6. Форматирование даты и времени
8.7. Форматирование чисел и данных о валюте
8.8. Локализация для iOS (продуктов Apple)
8.9. Экранирование фигурных скобок
Проект: игра «Тетрис» v.8. Локализация игры
Резюме
Вопросы для самопроверки
Глава 9. Сборка приложения
9.1. Режимы сборок
9.2. Подпись сборки под Android
9.3. Подпись сборки под iOS/MacOS
9.4. Подпись сборки под OC «Аврора»
Резюме
Вопросы для самопроверки
Заключение
Лабораторные практикумы к книге
Лабораторный практикум по Dart
Лабораторный практикум по Flutter
Рекомендуем прочитать

Предисловие

Огромная благодарность нашим родным, близким и всем тем,

кто поддерживал авторский коллектив в процессе написания книги!

 

 

 

 

Привет! После того как была написана книга «Основы Dart», от многих людей был запрос на ее логическое продолжение, а именно книгу по фреймворку Flutter. Не являясь гением многозадачности и понимая, сколько времени потребуется на ее написание, принял решение собрать авторский коллектив и воплотить в жизнь одну из безумных идей — договориться с одной или двумя компаниями на разработку ими лабораторного практикума к книге. Ведь это позволит не просто увеличить объем практических задач и примеров по разработке приложений, а использовать книгу вкупе с лабораторным практикумом как полноценный учебник не только для самообучения, но также в вузах и системе среднего профессионального образования. Если вы читаете эти строки, будучи студентом, и у вас до сих пор не преподают кросс-платформенную разработку — знайте, все для этого есть! Донесите, пожалуйста, до своей кафедры или преподавателей то, что львиная часть работы за них была сделана, а их задача заключается только в том, чтобы взять готовый материал, изучить его и использовать при проведении занятий.

Будучи идейным вдохновителем «Основы Flutter», лабораторного практикума и техническим редактором книги, могу с гордостью сказать, что за время написания всеми причастными к ней людьми (авторский коллектив, сотрудники Surf и Mad Brains) была проделана большая комплексная работа. Огромное спасибо вам за то, что поверили в блеск в моих глазах, когда я озвучивал свои мысли и задумки, а также решили принять участие в этом деле! Особая благодарность жене, дочери и родным! И куда же без тебя, читатель, и всех тех, кто поддерживал процесс работы над книгой как денежно (покупая курс на Stepik, куда первым делом выкладывался утвержденный материал книги), так и морально!

Всех приобнял ^_^, Станислав Чернышев

Эта книга особенная, потому что ее написал не один человек, а целая команда, которая любит Flutter и тратит свое время на то, чтобы развивать и популяризировать наш любимый фреймворк.

Мои коллеги — настоящие профессионалы, и их знания и опыт помогают нам создавать качественный учебный материал. Я уверен, что у нас получился полноценный учебный комплекс. Он включает в себя интерактивные задания — это позволит читателям не только изучать теорию, но и сразу начать применять знания на практике. А преподаватели смогут использовать наш материал в своих учебных программах в вузах и колледжах.

Благодарю свою супругу Светлану, которая поддерживала меня и придавала мне сил и энергии писать. Благодарю сообщество Flutter, которое поверило в нашу экспертность и поддержало нашу команду. Благодарю руководство компании Friflex за поддержку. Благодарю тех ребят, которые купят книгу или курс. Знайте, именно благодаря таким, как вы, появилась эта книга и фреймворк Flutter так стремительно развивается в российском сегменте.

Эта книга — результат сотни часов работы, обсуждений, идей и упорства. Надеюсь, она станет для вас надежным помощником в изучении Flutter.

С уважением, Юрий Петров

Еще год назад и представить не мог, что буду писать обращение к читателю книги. С первого приложения я искренне влюблен во Flutter! Его округлые кнопочки, изящные формы и мудрая архитектура. Как тут не влюбиться?!

Этот фреймворк на протяжении уже многих лет дает возможность мне и моим коллегам создавать отзывчивые и красивые интерфейсы для миллионов пользователей на любой платформе.

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

Спасибо авторскому коллективу за то, что пригласили принять участие в работе. Как говорят у нас в хип-хопе, «мерси, что позвали на этот cypher». Целую свою родню (банду) и друзей за поддержку! Это действительно было непросто!

А тебе, читатель, — краба за поддержку этой книги и приятного чтения!

С уважением, Станислав Ильин

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

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

Благодарю моих друзей и коллег за поддержку при написании этой книги, а также сообщество Flutter-разработчиков, которое и стало отправной точкой для старта.

С уважением, Павел Гершевич

Присоединяйся!

Далее приведены ссылки на полезные ресурсы, материалы к книге (курс на платформе Stepik с интерактивными задачами) и каналы, которые ведут авторы.

Мы в Telegram

https://t.me/FlutterBasics

ТГ-канал авторского коллектива книги «Основы Flutter», в котором публикуются новости о книге и курсе на Stepik

Чат сообщества

https://t.me/+Q_otDObSvYMyMTgy

Если при чтении книги у вас появляются вопросы, их можно задать в нашем чате в Telegram

Электронный курс на Stepik

https://stepik.org/a/197817

Курс «Основы Flutter» — электронная версия книги на платформе Stepik с тестами и интерактивными задачами на программирование (только Dart)

ТГ-канал Станислава Чернышева, где он делится своими мыслями о творящемся в образовании, мире IT и Dart/Flutter.

https://t.me/madteacher_channel

ТГ-канал Юрия Петрова, где вы найдете все, что касается мобильной разработки и Flutter.

https://t.me/mobile_developing

ТГ-канал Станислава Ильина: новости IT и Dart/Flutter, в частности, о разработке проектов, работе, обучении и немного о жизни. Лютый замес пользы и кринжа.

https://t.me/frezycode

ТГ-канал Павла Гершевича посвящен не только разработке мобильных приложений на Flutter — без нее никак, но и различным около-IT-темам и лайфстайлу.

https://t.me/ftl_notes

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] ­(издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Глава 0. Установка и настройка рабочего окружения. Основы Dart

В этой главе мы рассмотрим, как выполнить установку и настройку рабочего окружения Flutter в различных операционных системах, а также познакомим вас с базовым синтаксисом Dart. Для более глубокого погружения в этот замечательный язык программирования обратитесь к книге Станислава Чернышева «Основы Dart».

0.1. Установка и настройка рабочего окружения

Написание кода, представленного в книге, будет вестись в Visual Studio Code, который можно скачать по ссылке https://code.visualstudio.com/download.

0.1.1. ОС Windows

Существует два варианта установки Flutter в Windows: автоматическая и ручная. Оба они не слишком сложны, но во втором случае у вас есть возможность явно выбрать каталог, куда будет выполнена распаковка Flutter SDK. Поэтому с него мы и начнем, воздав дань тем, кто любит, когда власть полностью сосредоточена в их руках.

Перейдите по следующей ссылке: https://docs.flutter.dev/get-started/install.

Либо зайдите на сайт фреймворка, в раздел Getstarted. Перед вами откроется страница выбора операционной системы, в которой вы будет вести разработку (рис. 0.1).

Рис. 0.1. Выбор ОС, в которой будет вестись разработка

На следующем шаге выберите предлагаемую по умолчанию конфигурацию запуска новых проектов на Flutter (рис. 0.2).

Рис. 0.2. Выбор конфигурации запуска новых проектов на Flutter

Далее найдите раздел InstalltheFlutterSDK, выберите Downloadandinstall и скачайте архив с актуальной версией фреймворка (рис. 0.3).

Рис. 0.3. Скачивание архива с актуальной версией Flutter

После того как архив с Flutter SDK загрузится, распакуйте его в удобную для вас папку. Обычно ею выступает корневой каталог диска (C, D, F и т.д.). Теперь необходимо прописать путь до распакованного Flutter SDK в переменных средах в переменной Path (рис. 0.4).

В зависимости от целевой платформы, под которую вы планируете разрабатывать приложения, предстоит скачать необходимый инструментарий. Для Windows это будет Visual Studio Community со следующим выбранным пакетом (рис. 0.5).

Рис. 0.4. Указываем путь до Flutter SDK в переменной Path

Рис. 0.5. Установка Visual Studio Community

Если планируете погружаться в мобильную разработку, то для Android необходимо скачать Android Studio и смириться с тем, что под iOS на Windows или Linux написать какое-либо приложение с наличием платформозависимого кода, а особенно произвести сборку, не получится. Это связано с закрытостью экосистемы Apple. Поэтому для этих целей часто используется ноутбук с операционной системой macOS — его наличие позволяет одновременно вести разработку как под iOS, так и под Android. Но, так как не у всех есть возможность купить такой ноутбук, будем довольствоваться тем, что есть.

Далее нам необходимо установить и настроить Android SDK и Android Studio. Этот процесс вынесен в подраздел 0.1.4, так как он общий для всех операционных систем.

Чтобы проверить наличие всех компонентов для полноценной разработки приложений на Flutter в рамках используемой операционной системы, введите в терминале flutterdoctor без дополнительных флагов и параметров:

C:\Users\MADTeacher>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.16.8, on Microsoft Windows [Version 10.0.19045.4046], locale ru-RU)

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)

[√] Chrome - develop for the web

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.3)

[√] Android Studio (version 2023.1)

[√] IntelliJ IDEA Community Edition (version 2023.1)

[√] VS Code (version 1.87.0)

[√] Connected device (3 available)

[√] Network resources

 

• No issues found!

Если такие компоненты, как Chrome или IntelliJ, помечены восклицательным знаком — ничего страшного, а вот отсутствие других (Android toolchain, Android Studio) — тревожный звоночек.

0.1.2. ОС macOS

В отличие от установки Flutter в Windows, для macOS нужна небольшая дополнительная подготовка. Если у вас компьютер на Apple Silicon, сначала необходимо настроить Rosetta 2. Для этого требуется открыть приложение Terminal и выполнить следующую команду:

sudo softwareupdate --install-rosetta --agree-to-license

После этого понадобится установить дополнительное программное обеспечение, а именно IDE Xcode и менеджер зависимостей для приложений под iOS, macOS и другие операционные системы от Apple — CocoaPods.

Xcode — IDE от Apple, которая нужна для разработки приложений для iOS, iPadOS, macOS, watchOS и других ОС. С ней также поставляются:

• система контроля версий git;

• SDK для операционных систем от Apple;

• языки программирования Swift и Objective-C;

• симуляторы iOS, iPadOS, watchOS и tvOS.

В установке Xcode нет ничего сложного, так как его можно скачать с помощью Apple App Store. Для этого воспользуйтесь поиском или перейдите в раздел Разработка в меню справа (рис. 0.6).

Рис. 0.6. Раздел Разработка в App Store на macOS

Для скачивания и установки Xcode (рис. 0.7) понадобится некоторое время, так как он занимает довольно много места на устройстве. После завершения установки перейдите в терминал и запустите команду для настройки командной строки:

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

Следующим действием необходимо принять лицензию Xcode. Сделать это можно, не выходя из терминала:

sudo xcodebuild -license

Если ваш компьютер на Apple Silicon, то перед установкой CocoaPods нужно выполнить еще одну команду:

sudo gem install ffi

После чего выполните уже саму установку CocoaPods:

sudo gem install cocoapods

Рис. 0.7. Страница IDE Xcode в App Store на macOS

Теперь необходимо прописать путь до установленного нами CocoaPods в переменной PATH. macOS использует несколько различных терминалов в зависимости от версии. Мы рассмотрим тот, что присутствует в последних, — zsh. Для начала проверьте, существует ли файл ~/.zshenv, и если он отсутствует, то создайте. После чего откройте его любым текстовым редактором, будь то TextEdit или встроенный в терминал nano, и введите туда новую строку:

export PATH=$HOME/.gem/bin/:$PATH

где переменная $HOME — путь к нашему пользователю, переменная $PATH — та, к которой мы добавляем CocoaPods.

Сохраните файл и перезагрузите терминал. Для этого есть два способа: просто полностью выключить все текущие сессии терминала или выполнить команду:

source ~/.zshenv

CocoaPods можно установить и по-другому — с помощью пакетного менеджера Homebrew, который способен помочь и с установкой Flutter на компьютер. Для его установки введите в терминале следующие команды (их можно найти на сайте Homebrew https://brew.sh/):

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Как только на компьютере появляется Homebrew, для установки CocoaPods потребуется всего одна команда:

brew install cocoapods

Настала пора приступить к установке Flutter. Как и в случае с ОС Windows, перейдите на сайт фреймворка в раздел Getstarted или по следующей ссылке: https://docs.flutter.dev/get-started/install.

В нашем случае сайт сам подсветит выбранную macOS (рис. 0.8).

Рис. 0.8. Выбор ОС, в которой будет вестись разработка

На следующем шаге выберите предлагаемую по умолчанию конфигурацию запуска новых проектов на Flutter (рис. 0.9).

Рис. 0.9. Выбор конфигурации запуска новых проектов на Flutter

Далее найдите раздел InstalltheFlutterSDK, выберите Downloadandinstall и скачайте архив с актуальной версией фреймворка под ваш процессор (рис. 0.10).

Рис. 0.10. Скачивание архива с актуальной версией Flutter

Документация Flutter рекомендует создавать каталог и распаковывать архив с помощью терминала, но никто не запрещает сделать это вручную. Обычно каталогом для распаковки выступает папка development в корневом каталоге вашего пользователя. Для его создания и распаковки архива воспользуемся командами:

mkdir ~/development

unzip ~/Downloads/flutter_macos_arm64_3.22.2-stable.zip \ -d ~/development

На следующем шаге необходимо прописать в уже знакомом нам по предыдущим шагам файле ~/.zshenv путь до распакованного Flutter SDK в переменной PATH. Откройте его любым удобным способом и добавьте в конец строку:

export PATH=$HOME/development/flutter/bin:$PATH

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

source ~/.zshenv

Второй способ установки Flutter — с помощью Homebrew. Если вы уже установили Homebrew для CocoaPods (см. ранее), то для установки Flutter SDK достаточно вызвать одну команду:

brew install --cask flutter

и дождаться завершения процесса.

Если хотите запускать Flutter-приложения на Android, то вам необходимы Android SDK и Android Studio, установка и настройка которого описаны в подразделе 0.1.4.

Важное замечание!

Для работы с Android требуется JDK, официальные версии которого работают только на процессорах Intel. Поэтому, если у вас компьютер на Apple Silicon, то необходимо установить Azul Zulu OpenJDK 17 под эту архитектуру. Скачать его (рис. 0.11) можно на сайте Azul по ссылке https://www.azul.com/downloads/?version=java-17-lts&os=macos&architecture=arm-64-bit&package=jdk#zulu.

Рис. 0.11. Скачивание Azul Zulu OpenJDK 17 под ARM

Для разработки под iOS у нас практически все готово, осталось только докачать необходимые для работы симуляторов файлы. Это делается такой командой:

xcodebuild -downloadPlatform iOS

Если есть необходимость запуска на реальном iPhone или iPad, то сначала нужно купить подписку Apple Development Program, иначе ничего не получится. Правила у Apple довольно строгие, и это необходимо, чтобы никто не мог навредить своему устройству.

Чтобы проверить наличие всех компонентов для полноценной разработки приложений на Flutter в рамках используемой операционной системы, введите в терминал flutterdoctor без дополнительных флагов и параметров:

fognature@MBP-Pavel-2 ~ % flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.22.2, on macOS 14.0 23A344 darwin-arm64, locale ru-RU)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)

[√] Xcode - develop for iOS and macOS (Xcode 15.4)

[√] Chrome - develop for the web

[√] Android Studio (version 2023.1)

[√] VS Code (version 1.89.0)

[√] Connected device (4 available)

[√] Network resources

 

• No issues found!

Если такие компоненты, как Chrome или IntelliJ, помечены восклицательным знаком — ничего страшного, а вот отсутствие других (Android toolchain, Android Studio, Xcode) — тревожный звоночек.

0.1.3. ОС Ubuntu 20.04 LTS+ и Debian 11+

Как и в предыдущих случаях, перейдите на сайт фреймворка в раздел Getstarted или по следующей ссылке: https://docs.flutter.dev/get-started/install и выберите вариант установки Flutter в Linux. Так как мы рассмотрим установку Flutter с конфигурацией, позволяющей разрабатывать под Desktop и Android (для Web нужно будет только установить браузер Chrome), то нет разницы, что вы выберете на этом шаге (рис. 0.12).

Рис. 0.12. Выбор конфигурации запуска новых проектов на Flutter

Далее найдите раздел InstalltheFlutterSDK, выберите Downloadandinstall и скачайте архив с актуальной версией фреймворка под ваш процессор (рис. 0.13).

Рис. 0.13. Скачивание архива с актуальной версией Flutter

Первым делом после скачивания Flutter откройте терминал и убедитесь, что у вас установлены следующие инструменты:

which bash file mkdir rm which

/usr/bin/bash

/usr/bin/file

/usr/bin/mkdir

/usr/bin/rm

/usr/bin/which

Далее установим необходимые пакеты:

sudo apt-get update -y && sudo apt-get upgrade -y;

sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

Для одновременной разработки приложений под Desktop и Android нам потребуется установить довольно большой набор пакетов:

sudo apt-get install  \

      clang cmake git \

      ninja-build pkg-config \

      libgtk-3-dev liblzma-dev \

      libstdc++-12-dev \

      libc6:i386 libncurses5:i386 \

      libstdc++6:i386 lib32z1 \

      libbz2-1.0:i386

Если вы уже скачали Visual Studio Code, то переходите к следующему шагу, в противном случае сделайте это, перейдя по ссылке https://code.visualstudio.com/download.

В нашем случае был скачан пакет code_1.90.1-1718141439_amd64.deb. Для его установки необходимо перейти в терминале в каталог с загрузками, после чего ввести команду:

x@x-pc:~/Загрузки$ sudo apt install ./code_1.90.1-1718141439_amd64.deb

Для распаковки Flutter в каталог /usr/bin/ введите в терминале (находясь в каталоге с загрузками) следующую команду:

x@x-pc:~/Загрузки$ sudo tar -xf ./flutter_linux_3.22.2-stable.tar.xz -C /usr/bin/

Чтобы добавить Flutter в переменную среды PATH, первым делом проверьте, какая оболочка консоли используется в вашей операционной системе:

x@x-pc:~/Загрузки$ echo $0

bash

Если bash, то для указания путей до Flutter используйте команду:

echo 'export PATH="/usr/bin/flutter/bin:$PATH"' >> ~/.bash_profile

Для zsh:

echo 'export PATH="/usr/bin/flutter/bin:$PATH"' >> ~/.zshenv

После чего закройте терминал. При наличии другой оболочки обратитесь к официальной документации Flutter: https://docs.flutter.dev/get-started/install/linux/android?tab=download#add-flutter-to-your-path.

Теперь перейдем к небольшим пляскам с бубном, а именно к установке Android Studio, скачать который можно по следующей ссылке: https://developer.android.com/studio.

По завершении скачивания распакуйте архив и откройте в терминале каталог с загрузками, переместив Android Studio в /usr/local/:

х@х-pc:~/Загрузки$ sudo mv ./android-studio /usr/local/

Сам процесс установки и последующего запуска IDE состоит из нескольких команд:

х@х-pc:~/Загрузки$ cd /usr/local/android-studio/bin/

х@х-pc:/usr/local/android-studio/bin$ ./studio.sh

После завершения установки Android Studio ее необходимо перезапустить, а также инсталлировать дополнительные компоненты. Для этого на стартовом экране IDE нажмите на MoreActions и выберите запуск SDK Manager (рис. 0.14).

Рис. 0.14. Запуск SDK Manager

Далее перейдите на вкладку SDK Tools и убедитесь, что установлены все компоненты, выделенные галочками на рис. 0.15.

В противном случае поставьте галочки напротив:

• AndroidSDKCommand-lineTools;

• AndroidSDKBuild-Tools;

• AndroidSDKPlatform-Tools;

• AndroidEmulator.

Рис. 0.15. Установка компонентов

После этого нажмите кнопку Apply, дождавшись их установки. Порядок создания нового виртуального устройства и последующей настройки VS Code ничем не отличается от приведенного в подразделе 0.1.4. Поэтому для начала перейдите в него и создайте свой первый эмулятор, попутно установив нужный плагин для IDE и приняв все лицензионные соглашения от Google.

Чтобы проверить наличие всех компонентов для полноценной разработки приложений на Flutter в рамках используемой операционной системы, введите в терминал flutterdoctor без дополнительных флагов и параметров:

х@х-pc:~$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.22.2, on Ubuntu 22.04.4 LTS 6.5.0-35-generic, locale ru_RU.UTF-8)

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop

[✓] Android Studio (version 2024.1)

[✓] VS Code (version 1.90.1)

[✓] Connected device (1 available)

[✓] Network resources

 

! Doctor found issues in 1 category.

Если компонент Chrome помечен восклицательным знаком — ничего страшного, а вот отсутствие Android, Linux toolchain, Android Studio и т.д. — тревожный звоночек.

Возможно, у вас есть непреодолимое желание разрабатывать на Flutter в Android Studio, но каждый раз запускать ее командами — то еще удовольствие:

х@х-pc:~/Загрузки$ cd /usr/local/android-studio/bin/

х@х-pc:/usr/local/android-studio/bin$ ./studio.sh

Разместить ее ярлык (рис. 0.16) в меню быстрого доступа можно средствами самой IDE. Для этого создайте любой проект и выполните последовательность шагов AndroidStudioToolsCreateDesktopEntry.

Рис. 0.16. Ярлык для запуска Android Studio

Щелкнув на ярлыке правой кнопкой мыши, можно выбрать его фиксацию на панели инструментов на рабочем столе.

0.1.4. Установка и настройка Android Studio

Скачать Android Studio можно по следующей ссылке: https://developer.android.com/studio.

Прежде чем его устанавливать, убедитесь, что для процессора в BIOS включена аппаратная поддержка виртуализации. Это повысит скорость работы Android-эмулятора, дав ему прямой доступ к аппаратным ресурсам компьютера.

В самой установке Android Studio нет ничего сложного. Достаточно нажимать на Далее и соглашаться на инсталляцию дополнительных компонентов, а именно:

• AndroidSDKPlatform,API34.0.0 (версия может отличаться);

• AndroidSDKBuild-Tools;

• AndroidSDKPlatform-Tools;

• AndroidEmulator.

Если у вас много оперативной памяти и вы дружите с тремя буквами, которые нынче нельзя произносить на просторах РФ, то на Flutter можно разрабатывать и в Android Studio. Для этого после запуска IDE перейдите в раздел Plugins и установите следующий плагин (рис. 0.17).

Рис. 0.17. Установка плагина Flutter в Android Studio

После установки плагина и перезагрузки IDE у вас появится возможность создать новый проект на Flutter (рис. 0.18).

Рис. 0.18. Стартовый экран Android Studio

После нажатия на MoreActions открывается меню с дополнительными элементами (рис. 0.19), дающее нам доступ к менеджеру виртуальных устройств и SDK. Первый нужен для создания и удаления конфигурации эмулятора, а также управления ею, а второй позволяет скачать целевой Android SDK, под который будет вестись разработка, и управлять дополнительными инструментами (драйверы, сборщик и т.д.).

Рис. 0.19. Структура меню More Actions

Откройте менеджер виртуальных устройств, который должен встретить вас следующим пользовательским интерфейсом (рис. 0.20).

Рис. 0.20. Менеджер виртуальных устройств

По умолчанию при установке IDE были созданы несколько эмуляторов под 33-ю и 34-ю версии API. Если вам нужна другая версия Android на эмуляторе, то его придется добавить вручную (рис. 0.21). Для этого щелкните на крестике + в левом верхнем углу (см. рис. 0.20).

Рис. 0.21. Конфигурация создаваемого виртуального устройства

Выберите в категории Phone один из свежих смартфонов Pixel и нажмите кнопку Next (рис. 0.22).

Рис. 0.22. Выбор версии Android на создаваемом виртуальном устройстве

Если нужная вам версия не установлена ни на одной из вкладок (Recommended, x86Images, OtherImages), ее можно скачать, щелкнув на , после чего перейти к следующему шагу (рис. 0.23).

Рис. 0.23. Завершение конфигурации создаваемого виртуального устройства

На данном шаге можно изменить выбор устройства или версии Android, задать имя, например MADPixel 7 Pro API 33, и завершить конфигурацию создаваемого виртуального устройства, нажав Finish. Новое устройство будет добавлено в список доступных эмуляторов (закройте Device Manager) (рис. 0.24).

Рис. 0.24. Добавление нового виртуального устройства в менеджер

Представим, что вам жалко выделяемой для эмулятора оперативной памяти и вы приняли уверенное решение вести разработку с реального устройства. Активируйте на телефоне режим разработчика, затем, если у вас модель от Google, перейдите в раздел SDKTools менеджера SDK (SDK Manager) и установите GoogleUSBDriver (рис. 0.25). В ином случае перейдите на сайт производителя и скачайте их там.

Рис. 0.25. Установка Google USB Driver

Независимо от того, будете вы разрабатывать только в эмуляторе или на реальном устройстве, на этой же вкладке установите флажок AndroidSDKCommand-lineTools (рис. 0.26).

Рис. 0.26. Установка Android SDK Command-line Tools

Теперь закройте Android Studio и запустите Visual Studio Code, установив расширение Flutter (рис. 0.27) и перезапустив приложение.

Рис. 0.27. Установка расширения Flutter для VS Code

После перезапуска VS Code откройте терминал с помощью меню или сочетания клавиш Ctrl+Shift+`. Перед использованием Flutter нам необходимо принять лицензии Android SDK platform. Для этого введите в терминале следующую команду:

C:\Users\MADTeacher>flutter doctor --android-licenses

[=======================================] 100% Computing updates...

5 of 7 SDK package licenses not accepted.

Review licenses that have not been accepted (y/N)? y

Если на данном этапе появляется сообщение об ошибке:

Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.

значит, вы не установили AndroidSDKCommand-lineTools.