После прошлого занятия вы, вероятно, уже установили среду разработки Flutter. На этом уроке мы будем разрабатывать Flutter-проекты через Android Studio.
Установка плагина Flutter
По умолчанию Android Studio не поддерживает Flutter, поэтому нужно установить отдельный плагин для Flutter.
Откройте Android Studio, затем перейдите в верхнее меню File → Settings (горячая клавиша Ctrl+Alt+S)
В левом меню найдите раздел плагинов, введите в поиск flutter, нажмите установить, после завершения установки перезапустите Android Studio.
Настройка пути к Flutter SDK
Одной установки плагина недостаточно, нужно дополнительно указать путь к Flutter SDK в Android Studio.
File → Settings → Languages & Frameworks → Flutter
Файл Настройки Языки и фреймворки flutter
Укажите корневую папку Flutter, не переходите в подкаталог bin. Затем нажмите кнопку Apply.
Дождитесь полного завершения установки и настройки.
Создание проекта
Далее процесс полностью совпадает с обычным созданием проекта в Android Studio.
Выберите Flutter, справа снова укажите папку Flutter, затем нажмите Next.
Задайте имя проекта, папку для сохранения, описание и уникальный идентификатор организации. Этот идентификатор должен быть уникальным при публикации в Google Play, поэтому рекомендуется записывать домен в обратном порядке. В примере используется com.foxdevelop.имяпроекта. Затем выберите базовый язык Android — это не язык разработки, а язык нативной оболочки приложения, код вы будете писать на Dart. В разделе Platforms отметьте платформы, для которых вы собираетесь компилировать код. Я отметил Android, веб и Windows Desktop для выпуска приложений этих типов; если нужно выпустить для iOS, Linux или macOS, отметьте остальные три пункта. В конце нажмите Create.
Важно: имя проекта должно состоять только из строчных букв, без пробелов и специальных символов.
После этого Android Studio начнет создавать проект, это может занять некоторое время.
У меня на данном этапе возникла следующая ошибка.
Нажмите Run Flutter Doctor, чтобы запустить диагностику Flutter и проверить окружение.
После этого откройте проект в обычном режиме.
Однако в правом верхнем углу запустить проект не получается, появляется следующее уведомление:
Я сменил цветовую тему, поэтому сейчас Android Studio работает в светлом режиме.
На скриншоте виден красный крестик, нажмите на него.
Нажмите «Редактировать конфигурации» (Edit Configurations).
Появится уведомление о том, что Dart SDK не настроен, нажмите кнопку Fix справа.
Нужно указать путь к каталогу Dart SDK: после установки Flutter Dart находится внутри папки Flutter SDK.
Если путь к Flutter SDK выглядит так:
то путь к Dart SDK будет:
Настройте путь к Dart как показано на изображении, затем не забудьте перезапустить Android Studio.
После этого в верхней панели появится зеленый треугольник запуска. Если слева выбран Windows Desktop, вы можете запускать проект как настольное приложение Windows; нажмите зеленый треугольник для запуска.
* Решение распространенных ошибок
Если у вас не появляются описанные ниже проблемы, этот раздел можно пропустить.
Такие ошибки возникают при неполной загрузке зависимостей. Если проблема связана с сетью, можно использовать прокси или настроить зеркало репозиториев.
Если вы столкнулись с этими ошибками, настройте зеркало в терминале Android Studio как показано на скриншоте выше.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode language: PHP (php)После выполнения команд все ошибки исчезнут.
Запуск проекта
Нажмите треугольник в левом верхнем углу для запуска проекта. Flutter поддерживает множество платформ: подключите телефон к компьютеру, включите режим разработчика для отладки Android-приложений, либо используйте Windows Desktop для тестирования без мобильного устройства.
Как видно на изображении, вы можете выбрать одну из трех платформ, отмеченных при создании проекта. В данном примере я выбираю Windows Desktop, затем нажимаю зеленый треугольник для запуска.
На изображении показано наше первое приложение Flutter. На этом урок завершается, попробуйте выполнить все шаги самостоятельно. При возникновении трудностей оставьте комментарий ниже.
Создание Flutter-проекта через Android Studio