Установка Flutter на Windows (март 2023)
Работа с Windows более дружелюбна, чем на любой другой операционной системе, но за это часто приходится платить повышенным расходом оперативной памяти.
Помимо памяти важную роль играет процессор вашего компьютера, который может не поддерживать виртуализацию, из-за чего вы не сможете пользоваться эмулятором Android. В таком случае отладкой программы придется заниматься непосредственно на "живом" смартфоне.
Для старта я установил чистую Windows на свой MacBook второй системой, и мы постараемся в ходе установки описать все потенциальные проблемы.
1. Ставим Git и скачиваем Flutter
Начинаем с того, что переходим на сайт https://flutter.dev/ и нажимаем на кнопку Get Started справа вверху
На новой странице мы увидим ссылки на инструкции для разных платформ, выбираем свою
На открывшейся странице рекомендую сразу обратить внимание на установку Git - если она уже стоит у вас, то это хорошо, но если вы не знаете, есть она или нет, либо же вообще впервые видите слово "git" - переходим по этой ссылке
На новом сайте качаем установщик для 64-разрядной версии и запускаем его
Во время установки вас будут спрашивать очень много разных вещей, но если нет четкого понимания, что эти настройки обозначают, то и менять ничего не надо. Если вы просто оставите все как есть, нажимая кнопку Next, этого будет достаточно
Сама установка не займет много времени, на финальном экране можете снять все галочки и нажать Finish
Теперь возвращаемся к странице с инструкцией по установке (https://docs.flutter.dev/get-started/install/windows), пролистываем вниз и качаем сам архив с Flutter
Пока он будет скачиваться, мы можем не ждать и перейти к следующему шагу
2. Скачиваем Android Studio
Это будет наша основная среда разработки. Находим ее в поиске
и на сайте, на первом же экране, нажимаем большую зеленую кнопку
Интересно, что разработчики Android Studio называют каждую новую версию в честь какого-нибудь живого существа. На текущий момент это Electric Eel - электрический угорь. Не так давно была версия, посвященная Arctic Fox (песец)
При нажатии на кнопку вам предложат внимательно пролистать лицензионное соглашение, поставить галочку и скачать установщик
Не поддаваясь на соблазн получить ярлычок "почетный качатель Android Studio" переходим к папке, куда скачался Flutter
3. Установка Flutter
Суть установки сводится к тому, что нам надо распаковать архив куда-нибудь, где он не будет мешаться и прописать путь к нему в системных параметрах Windows, чтобы команда flutter была доступна в любом месте и в любое время.
Я обычно держу Flutter в корневой директории диска С:, хотя последние тренды говорят нам, что надо на диске С создать папку src и хранить все там. Как по мне, это лишнее, поэтому нажимаем правой кнопкой на скачанный архив, в меню нажимаем "Извлечь все", в открывшемся окне оставляем только C:\ и ждем, пока распакуется. Это будет долго.
В конце процесса ваш диск С будет выглядеть примерно так:
Если по каким-то причинам вы распаковали архив с Flutter прямо в папку "загрузки", просто перетащите папку flutter из нее на диск C
Далее, нам надо добавить эту папку к системным переменным. Можете прямо здесь нажать правой кнопкой на "Мой компьютер" и выбрать пункт меню "Свойства", либо открыть "Параметры" в кнопке Пуск Windows.
Нас интересует пункт "Дополнительные параметры системы", который откроет окошко, знакомое нам еще со времен Windows XP (на скриншоте оно слева). В нем выбираем вкладку "Дополнительно" и нажимаем кнопку "Переменные среды".
Находим в разделе "Системные переменные" переменную PATH (путь) и нажимаем "изменить". Нам надо будет дописать путь к Flutter, как на картинке:
Естественно, если вы распаковали Flutter в другую папку, то прописать надо будет ваш путь.
В моем случае Flutter лежит на диске C, поэтому я добавляю c:\flutter\bin
4. Настройка Flutter
Первичная настройка производится из командной строки Windows, попасть в которую можно нажав сочетание кнопок на клавиатуре Win+r, и в открывшемся окне "выполнить" ввести cmd
В терминале сначала пишем команду flutter и нажимаем enter, чтобы выполнить ее
По итогу через некоторое время нам сообщат, что Flutter готов к работе.
Нам осталось сделать так, чтобы наш компьютер был готов к работе с ним.
Для этого запускаем команду flutter doctor и ждем результата:
Пока он думает, переходим к следующему шагу
5. Установка Android Studio
Установка ничем особым не отличается от установки других программ. Запускаем скачанный установщик -
и следуем подсказкам
На следующем экране убедитесь, что стоят обе галочки
После некоторого ожидания нам предложат настроить установившуюся среду разработки:
Сначала вам предложат импортировать старые настройки. У нас их нет, пропускаем
Затем предложат отправлять анонимную статистику разработчикам (лучше выбрать Don't send) и система переключится в традиционную темную тему. Оставляем тип установки как обычный ("Standart")
Следующим шагом мы выбираем светлую или темную тему будем использовать по умолчанию. Для кратковременной работы рекомендуется использовать темную, если же вы планируете зависать у экрана сутками напролет - то светлая будет более безопасна для глаз
На следующем экране у нормальных людей будет возможность нажать кнопку Next и продолжить, у нас же все умышленно немного не так.
Во-первых, нам недоступна виртуализация на уровне процессора и, как следствие, система не даст установить виртуальную машину для запуска эмулятора Android. С этим мы ничего не поделаем, на этом компьютере нам будет доступна только разработка на "живом" смартфоне.
А вот ниже мы видим, что в имени пользователя используется недопустимый символ - пробел, и Android SDK не сможет в нее установиться. Это придется исправлять вручную, указав другую папку
Я решил опять загадить корневой катало диска С и создать в ней папку Android для будущей установки SDk.
Теперь можно продолжать
Нас спросят, уверены ли мы вот в этих всех параметрах... Уверены.
и предложат принять ряд лицензионных соглашений. Сначала первую...
...потом вторую, и активизируется кнопка Finish
Ждем завершения, будет выглядеть примерно так
6. Настройка Android Studio
Android Studio расширяется за счет системы плагинов, и Flutter тут не исключение.
После установки у нас появится стартовое окно программы, где надо будет слева нажать Plugins
Нам откроется маркетплейс, где мы в строке поиска пишем слово flutter и устанавливаем самый первый из найденных плагинов
Перед установкой вам скажут, что также надо будет установить плагин Dart - соглашайтесь
По окончанию надо будет перезапустить среду разработки, нажав тут же на кнопку
После чего мы увидим, что нам стало доступно создание проектов на FLutter.
К сожалению, это еще не все.
7. Устранение ошибок в настройках Flutter
Возвращаемся в окно командной строки и еще раз запускаем команду flutter doctor
Поскольку мы при установке указывали другое местоположение для Android SDK, Flutter его не сможет найти, о чем и предупредит нас
Естественно, если у вас не возникло такой ошибки, то Flutter успешно нашел Android SDK и делать ничего не надо.
В нашем случае проблема решается командой flutter config --android-sdk c:\android
Конечно, если вы установили Android SDK в другую папку, то вместо c:\android напишите правильную.
Сразу после выполнения этой команды еще раз запускаем flutter doctor (можете нажать на клавиатуре кнопку вверх, чтобы перейти к предыдущим командам), чтобы убедиться, что проблема ушла, сменившись на другую.
Чтобы справиться с ней, нам надо попасть в Android Studio, одновременно с этим давайте создадим первый свой проект и немного донастроим ее
8. Создание проекта в Android Studio
Наверное, возникает уже мысль "сколько можно". На самом деле, процесс разработки приложения носит такой же итеративный характер, когда раз за разом проходятся по проекту, пока все проблемы не устранятся.
Итак, возвращаемся к нашей Android Studio и создаем новый Flutter проект
Я не стал здесь рисовать стрелочку, потому что на данном этапе эта кнопка не особо правильно работает. Такова жизнь. В открывшемся окне еще раз убедитесь, что слева выбран именно Flutter, а не первый пункт меню. Если строка с Flutter SDK path пуста - сделайте так, чтобы там была папка вашего недавно распакованного архива с Flutter, как на картинке
На следующем этапе выбираем базовые настройки проекта
Самое сложное здесь поле - это Organization. По сути это адрес сайта вашей фирмы, записанный задом наперед. Почему самое сложное? Потому что изменить его, если потом передумаете, будет очень проблематично. Поэтому если будете делать приложение, которое планируется к публикации в магазинах приложений, этот момент надо продумать заранее.
В поле Project Location указана домашняя папка проекта. Знак ~ указывает на домашнюю папку пользователя. Слово StudioProjects можете заменить на любое свое, Android Stuido создаст нужную папку. Я, опять же, храню все рабочие проекты в папке c:\app, но не буду здесь навязывать свою точку зрения, это не принципиально.
После нажатия на кнопку Create запустится среда разработки. Первое время она будет недоступна, т.к. идет процесс индексирования проекта (индикатор в самом низу окна). Там же, слева внизу, будут выскакивать различные уведомления среды разработки. Их лучше не игнорировать.
После того, как индексирование закончится, нажмите No thanks чтобы не слать лишней информации о себе в интернет (любая телеметрия как минимум лишний раз нагружает ваш компьютер).
Чтобы закрыть панель с текстом Whats New in Electric Eel нажмите на кнопку Assistant сбоку.
Вообще, все кнопки по периметру окна открывают дополнительные панели, можете попробовать.
Если все прошло правильно, Android Studio откроет главный файл вашего проекта, с которого начинается запуск, и предложит включить форматирование Kotlin. Можете согласиться, на нас это не повлияет
9. Подготовка Android Studio к работе
Открываем настройки Android Stuido (File - Settings)
Ищем в дереве System Settings пункт Android SDK, открываем справа вкладку SDK Tools и ждем, пока загрузится. Далее ставим галочку напротив Android SDK Command-line Tools и нажимаем apply
Ждем установки
Потом переходим в Plugins, чтобы установить несколько помощников в нашей работе.
Для этого в маркетплейсе пишем Flutter и сортируем по популярности.
Нам нужны вот эти три:
Нам нужны вот эти три:
На этом с настройкой Android Studio закончили
10. Завершаем настройку Flutter
Возвращаемся к командной строке и снова запускаем команду flutter doctor Обращаем внимание, что теперь нам надо принять еще ряд лицензионных соглашений
Вводим команду flutter doctor --android-licenses и жмем на y, пока ему это надо:
После этого еще раз запускаем flutter doctor. Остались три пункта, связанных с дополнительными возможностями работы - нужен Google Chrome для создания Web-приложений, плюс Flutter'у непонятна версия Windows и нужны дополнительные библиотеки для создания приложений под Windows
Из этого всего мы только установим Chrome. Для этого просто найдем его в интернете и установим
Еще раз проверяем flutter doctor - видим, что мобильной разработке больше ничего не мешает и завершаем на этом этап настройки Flutter для разработки мобильных приложений
Почему мы не стали исправлять остальные две ошибки? Они связаны с разработкой приложений под Windows, а перед нами такой цели не стоит, поэтому можем просто проигнорировать их вместо того, чтобы засорять компьютер лишними библиотеками разработки.
11. Первый запуск программы
Перед тем, как скомпилировать и запустить свою первую программу, мы должны выбрать целевое устройство. От этого будет зависеть процесс сборки и отладки.
Поскольку на этом компьютере отсутствует поддержка виртуализации, нам доступны только web и windows.
Windows мы не настраивали, web не хотим. Пора подключить свой андроид смартфон к компьютеру.
Если у вас iPhone - ничего не выйдет, увы. К счастью, исходный код практически не меняется от выбора целевого устройства, поэтому остается выбрать в качестве цели компиляции Chrome.
Если у вас iPhone - ничего не выйдет, увы. К счастью, исходный код практически не меняется от выбора целевого устройства, поэтому остается выбрать в качестве цели компиляции Chrome.
Для нужд разработки подойдет любой Android-смартфон с версией Android не ниже 5. Прежде чем его можно будет использовать, надо включить на нем режим разработчика (проще погуглить, как это делается на конкретно вашем телефоне) и в появившемся меню в настройках телефона "для разработчиков" (опять же, на разных телефонах оно в разных местах, придется поискать) разрешаем отладку через USB и установку через USB.
Если после этого вы подключили телефон к компьютеру проводом и на телефоне высветилось "доверять этому компьютеру?" и код цифровой подписи - то все получилось.
Если нет - в первую очередь попробуйте другой USB кабель, т.к. есть кабели пригодные только для зарядки, а вам нужен именно кабель для синхронизации (DATA-кабель)
После того, как вы разрешили на телефоне устанавливать приложения с компьютера, ваш телефон отобразится в списке целевых устройств
Выбираем его и нажимаем на зеленую кнопку запуска программы.
.....и опять попадаем на установку библиотек, необходимых для запуска программы на вашем телефоне. Это разовая процедура, но длится довольно долго, наберитесь терпения. У вас появится панель внизу программы, и некоторое время не будет ничего происходить, потом только появится информация о ходе установки
Когда установка закончится, Android Studio передаст готовую программу на телефон и попытается запустить. Телефон при этом выдаст предупреждение, что с компьютера пытаются установить неизвестное приложение и даст 10 секунд на принятие решения.
Я проспал этот момент и получил вот такую ошибку:
Ничего страшного, еще раз нажимаем на кнопку с зеленым треугольником. В этот раз все будет быстро, не отвлекайтесь
И вот, она запущена на вашем телефоне!
Фото телефона показывать здесь не буду.
12. Настройка виртуального смартфона на компьютере
А что, если у нас "взрослый" процессор, который поддерживает виртуализацию?
С точки зрения производительности - лучше запускать отладку на настоящем смартфоне. На слабых компьютерах это в полтора-два раза уменьшает нагрузку, включая память, процессор и диск.
С точки зрения производительности - лучше запускать отладку на настоящем смартфоне. На слабых компьютерах это в полтора-два раза уменьшает нагрузку, включая память, процессор и диск.
Но иногда компьютер достаточно мощный, экран большой(или их два), и мы можем себе это позволить удобство пользования эмулятором.
Для этого сначала откроем боковую панель Device Manager и создадим новое устройство
Нам предложат выбрать модель, основное отличие у них в размерах экрана
А вот на следующем экране можно не менять ничего, а можно нажать на кнопку "Show Advanced Settings"...
...и получить доступ к тонкой настройке вашего виртуального смартфона. Тут будет и доступ к реальным камерам вашего компьютера, и размер выделяемой оперативки (он "откусит" ее от вашего компьютера) и размер хранилища. Из наиболее интересного - возможность ограничить качество сети передачи данных
Наконец, созданный телефон появился у нас и мы можем его запустить в панели Emulators (она откроется автоматически)
Первый запуск будет довольно долгий, и в итоге Вы увидите примерно это:
Рекомендую закрыть панель Device manager, убедиться, что новый виртуальный смартфон у нас выбран как целевое устройство и запустить программу
Готово! Но выглядит неудобно
Решение простое - нажмите на заголовок вкладки правой кнопкой, зайдите во View Mode и поэкспериментируйте
Например, можно эмулятор отображать в отдельном окне. Так выглядит гораздо удобнее
На этом все, задавайте вопросы!