Приветствую, друзья!

Говоря о профессиональной кроссплатформенной разработке надо понимать, что рано или поздно Вы все равно придете к необходимости работы на маке, поэтому эта статься будет полезна всем.
Хотя бы потому, что только MacOS позволит делать программы как для Android, так и для iOS, и использовать в качестве целевой платформы любой смартфон.

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

За основу взят MacBook Air 2017 года, и на момент написания статьи это минимальная конфигурация, с которой стоит начинать.

Как видите, на нем установлена самая актуальная на сегодняшний день версия ПО.

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

С нее мы начинаем наш квест длинною в два часа. Без Xcode вы не сможете сделать приложение для iOS, а это главная причина использовать Mac

Ставиться она будет неприлично долго, поэтому мы не будем ждать конца установки а перейдем к следующему шагу

Скачать его можно с сайта https://flutter.dev/ нажав на кнопку Get Started справа вверху

В открывшемся окне выбираем свою платформу, в нашем случае это вторая кнопка слева

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

Для старых компьютеров с процессором Intel выбираем левую кнопку, для M1 и последующих - правую

Прежде чем продолжить, нам надо сделать ярлычок к своей домашней папке, который облегчит нам жизнь. Для этого открываем Finder, нажимаем вверху переход и находим пункт назначения "Личное"

..и добавляем ее в боковое меню

Должно получиться вот так:

Это мы сейчас видим свою "домашнюю папку", в которой размещена вся персональная информация. Здесь мы будем держать исходные коды и всякие полезные вещи, чтобы не захламлять рабочий стол или папку вроде "Документы".

Если у вас не отключена настройка по автоматической распаковке скачанных архивов, то в папке Загрузки вы найдете папку Flutter. Переместите ее мышкой в свою домашнюю папку

Теперь вам надо найти и открыть такую программу, как Терминал. Обычно она в папке Другие

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

Мы не будем плотно изучать работу с терминалом и его команды, тем более, что в дальнейшем терминал нам будет доступен через Android Studio - интегрированную среду разработки, в которой мы будем работать. Пока что можете в терминале напечатать команду ls (от слова listing) и нажать enter, эта команда покажет вам содержимое текущей папки:

Как видите, мы действительно в своей домашней папке. Почему вместо "загрузки", "документы", и т.п. стоят английские названия? Да потому что в графической оболочке MacOS переводит их названия на локальный язык, а по факту все выглядит вот так.

Давайте введем теперь вот такую команду: ls -a

Команда у нас ls, а ключ -a (пишется слитно с черточкой) задает ей особый режим. В частности, показывает нам скрытые файлы и папки (a от слова all). Дело в том, что, в отличие от Windows, файлы и папки не имеют отдельного атрибута "скрытый", а скрытыми считается все то, что начинается с точки.

Если продолжать настройку системы согласно руководству на сайте, то у вас, скорее всего, ничего не получится, и механизмы этого мы посмотрим позже, сейчас просто выполните в терминале команду touch .zshrc

это создаст скрытый файл .zshrc в котором будут храниться персональные настройки терминала. Без этого мы не сможем запустить команду flutter

Интересно, что в официальной инструкции на сайте нам предлагают работать с файлом .bashrc. Это зависит от того, какую командную оболочку мы используем. MacOS по умолчанию сидит на zsh, это видно в заголовке окна терминала. Соответственно, поэтому мы и создаем файл .zshrc

Открываем его для редактирования с помощью консольной же команды nano .zshrc

Откроется консольный текстовый редактор. Пока что там ничего не делаем, а возвращаемся в браузер за примером нужной строки. Для этого нажимаем сюда

И у нас откроется инструкция, которая как раз не сильно нам поможет. Нам только надо из нее забрать вот эту строку

Теперь вставляем ее в редактор в терминале, выглядеть будет так:

Нам надо удалить все что внутри квадратных скобок, включая сами квадратные скобки

Теперь нам надо где-то взять правильный путь к папке flutter, которую мы недавно перетащили из загрузок в домашнюю папку. Для этого нажимаем на нее правой кнопкой и выбираем "свойства"

Откроется окно свойств, щелкаем на текст правее слова "Где" и выбираем "Скопировать путь"

После этого возвращаемся в терминал, вставляем в строку и дописываем слово flutter, чтобы выглядело примерно так:

вместо eugenetretiakov будет ваш логин.

После этого сохраняем, нажав Ctrl-X

потом Y чтобы сохранить. Когда программа закроется, можем попробовать ввести команду flutter и убедиться, что она не работает (тут можно посмеяться).

Это произошло потому, что та информация, которую мы только что добавили в файл .zshrc не была загружена этим терминалом, он запускался без нее и ничего не знает про flutter. Поэтому закрываем его, открываем снова и еще раз вводим команду flutter. Для продолжения своей работы Flutter запросит установку дополнительных компонентов:

После нажатия кнопки "продолжить" не спешите расстраиваться, увидев вот это:

Минута в этом контексте - понятие растяжимое.

Строго говоря, можно обойтись без этой программы. Но одновременно с этим нельзя, поскольку Android Studio подтянет за собой все, что необходимо для создания приложений для Android, так же как Xcode - все, что необходимо для работы с iOS, MacOS, WatchOS.

Для начала находим в интернете android studio

И прямо с первого же экрана его скачиваем, нажав на большую зеленую кнопку. В конкретном случае Electric Eel - это название сборки, они каждую новую версию обзывают в честь какого-то животного. Была даже версия, посвященная песцу (Arctic Fox).

При нажатии откроется пользовательское соглашение, которое надо пролистать вниз чтобы система поверила, что вы прочли его и разрешила принять его. Аналогично Flutter, слева сборка для компьютеров на процессе Intel, справа - для новых.

Качать лучше dmg файл, если вдруг будет задан такой вопрос

Открыв скачанный файл двойным щелчком вы "примонтируете" его в систему, что позволит выполнить установку (потом убрать его можно будет как и флэшку)

Установка сторонних программ на компьютерах Apple, если вы еще не знали, заключается в перетаскивании мышкой иконки с устанавливаемым приложением на иконку папки Applications. Это запустит процесс копирования файлов и создания ярлыков

После чего она появится среди остальных программ

При этом при запуске в первый раз система будет еще помнить, что эта программа была установлена из интернет и попросит подтвердить, что вы уверены в ее безопасности

После этого начнется процесс настройки Android Studio. Сначала спросят, хотите ли вы импортировать старые настройки. Нет, не хотим (их нет)

Потом откроется окно первичной настройки среды разработки (перед этим могут предложить отправлять анонимную статистику в интернет - не соглашайтесь)

По сути, весь процесс будет сводиться к тому, что вы со всем соглашаетесь и ничего не меняете

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

После этого вас попросят согласиться с введенными настройками

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

После чего опять начнется установка недостающих элементов

Закончится все вот так

На этом этапе нам надо интегрировать Flutter в Android Stuido. Делается это через плагины. Для этого на главном экране программы слева нажимаем plugins

Откроется маркетплейс, где в строку поиска введите слово Futter и установите самый первый плагин. Он вместе с собой еще попросит установить Dart, соглашайтесь.

После установки Вам потребуется перезапустить IDE

Теперь на начальном экране Android Studio появилась кнопка "создать проект Flutter"

Но мы лучше сейчас вернемся к плагинам и установим еще парочку, которая сильно поможет нам в работе. Найти их можно, если отсортировать выдачу в маркетплейсе по рейтингу

Ставим Pub Version Checker, Enhacement Suite и GetX

Вот первые 30% страданий позади, и мы можем создать наш первый проект на Flutter, который, в общем-то, пока еще не запустится.

Откроется окно, где зачем-то надо будет еще раз выбрать слева слово Flutter

После нажатия кнопки Next откроется окно настроек, где можно будет выбрать, под какие платформы мы собираемся компилировать приложение, указать имя и выбрать имя пакета. Интересный момент - вы можете выбрать Windows, например, но скомпилировать код можно будет только если вы его перенесете и откроете на компьютере с Windows.

Самое сложное здесь поле - это Organization. По сути это адрес сайта вашей фирмы, записанный в обратном порядке. Почему самое сложное? Потому что изменить его, если потом передумаете, будет очень проблематично. Если будете делать приложение, которое планируется к публикации в магазинах приложений, этот момент надо продумать заранее.

В поле Project Location указана домашняя папка проекта. Знак ~ указывает на домашнюю папку пользователя. Слово StudioProjects можете заменить на любое свое, Android Stuido создаст нужную папку.

После нажатия на кнопку Create запустится среда разработки. Первое время она будет недоступна, т.к. идет процесс индексирования библиотек и проекта (индикатор в самом низу окна). Там же, слева внизу, будут выскакивать различные уведомления среды разработки. Их лучше не игнорировать

После того, как индексирование закончится, нажмите No thanks чтобы не слать лишней информации о себе в интернет (любая телеметрия нагружает ваш компьютер).

Чтобы закрыть панель с текстом Whats New in Electric Eel нажмите на кнопку сбоку. Чтобы закрыть уведомление, не отреагировав на него, подведите мышку к верхнему углу, может появиться крестик.

Вообще, все кнопки по периметру окна открывают дополнительные панели, можете попробовать

Но объективно на этом пока все, что мы сможем здесь сделать. Поэтому просто закрываем Android Studio и любуемся на вот это окно

Давайте вернемся к Терминалу и тому, что оно устанавливало

После того, как закончится эта установка (если она еще не закончилась) нажимаем на кнопку "Готово" и возвращаемся в Терминал, где пишем команду flutter doctor

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

Все ошибки, которые нам пишут, читаем внимательно и вдумчиво, если не понятно - берем текст ошибки целиком и отправляем в гугл.

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

Если Xcode еще не установился - он выглядит примерно вот так

Когда надпись "установка" пропадет, запускаем Xcode

После первого запуска - принимаем соглашение (Agree)

Выбираем платформы, под которые будем разрабатывать

После установки необходимого увидим примерно вот такое приветствие

На этом пока заканчиваем с Xcode

Возвращаемся в терминал, снова запускаем flutter doctor

Конкретно на этом экране видим, что в системе нет Google Chrome - но это понятно и это потом, а также то, что не установлены CocoaPods и предложена ссылка, где есть установщик

Попробуем открыть ее в браузере и сразу видим команду, которая установит нам CocoaPods (если не знаете, что это - не важно, придет время разберетесь)

Берем эту команду, вставляем ее в терминал и выполняем

Сразу маленькое замечание - по сути, команда установки выглядит как gem install cocoapods, а команда sudo обозначает, что выполнение идет от имени администратора. Для этого система спросит у вас пароль (не от Apple ID, а от вашего локального аккаунта), но при вводе не будет отображаться ничего. Поэтому просто вслепую напечатайте пароль и нажмите Enter

И, по итогу работы мы видим, что ничего не установилось. Сообщение об ошибке содержит подсказку насчет решения - мол, надо установить другую версию какого-то пакета:

Пробуем выполнить ее, не забыв дописать слово sudo. Если в этот раз не будет запрошен пароль - это нормально, система на некоторое время "запоминает", что в этом терминале можно работать с повышенными правами

После выполнения еще раз пробуем предыдущую команду. Чтобы вернуться к ней быстро, не набирая повторно, попробуйте нажать кнопку вверх на клавиатуре. Терминал запоминает историю команд, что очень удобно

После выполнения - опять неудача

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

В результатах поиска в первую очередь смотрим те результаты, что с сайта stackoverflow - привыкайте, теперь это ваш любимый сайт

Открываем первый понравившийся результат поиска (у нас это вторая строка)

Ошибка похожа на нашу, пролистываем вниз до секции с ответами. Вроде есть ответ с высоким рейтингом (но он не помечен, как решение), значит он и нам скорее всего не поможет.

Тем не менее, пробуем рекомендации и копируем предлагаемую команду к себе в терминал

Как видим, не помогло - система ответила, что с этой частью все в норме, так как Xcode у нас установлен нормально. Можно, конечно, подумать что при открытии проекта Xcode тоже будет чего-то докачивать, устанавливать и настраивать, но в конкретном случае это не то. Пробуем второй совет из этого же ответа на stackoverflow

Выполняем эту команду в терминале....

Не пошло - говорит, не хватило разрешений для записи в нужную папку. Забыли дописать sudo. Пробуем еще раз.

И снова неудача. Возвращаемся к поиску и переходим на второй результат выдачи, там тоже stackoverflow. И только здесь читаем, что для работы необходим какой-то brew

...которого наша система, как и ожидалось, не знает

Правда в том, что CocoaPods без головных болей можно установить только через Homebrew, ищем их

и переходим на сайт. Копируем ссылку, которая прямо посередине на первом экране

и запускаем ее в Терминале

Вас попросят нажать Enter

И после непродолжительного ожидания нам будет предложено сделать следующее

Можем просто скопировать и запустить тут же

Затем возвращаемся на сайт stackoverflow и делаем то, что там сказано

Обратили внимание на зеленую галочку под ответом? Это обозначает, что человек, который задал вопрос, отметил этот ответ как решивший проблему.

Запускаем первую команду в терминале

Потом вторую

После успешного завершения процесса снова пробуем flutter doctor

И видим, что проблема с CocoaPods решена

Поскольку следующая проблема, которую мы будем решать, связана с Android Studio - открываем заново наш проект

После загрузки переходим в Preferences

И ищем System Settings - Android SDK, устанавливаем Android SDK Command-line Tools

Соглашаемся

И снова ждем установку

Возвращаемся в терминал и еще раз пробуем flutter doctor - нам остался предпоследний пункт, принять все лицензии разработчика.

Выполняем команду flutter doctor --android-licenses и нажимаем Y пока все не закончится

После этого снова запускаем flutter doctor, видим, что из нерешенных осталась только установка Google Chrome - это необходимо для разработки приложений под web

Установка Chrome - в общем-то обычная, ничего особенного, просто следуйте подсказкам

Если у вас слабый компьютер, то имеет смысл подключить живой телефон к компьютеру и работать с ним. Это снизит нагрузку на систему. Тем не менее, встроенный симулятор не слишком требовательный, и до некоторого времени при наличии 8Гб оперативной памяти можно пользоваться им.
Все дело в том, что симуляция идет здесь не за счет развертывания отдельной виртуальной машины, а за счет возможностей операционной системы. Чем более новая у вас MacOS, тем более новые телефоны она может симулировать. Именно поэтому на старом ноуте у нас открывается симулятор новейшего айфона, и именно поэтому, когда на ваш Mac перестанут приходить обновления это будет означать необходимость скорейшего апгрейда.

Один из способов, как запустить симулятор - это открыть ваш уже созданный проект в Xcode (это папка ios в папке вашей программы)

и открываем "Simulators" в основном меню программы - "Open Developer Tool" -

Первая загрузка эмулятора может быть долгой

По результатам Android Studio появится возможность запустить проект на симуляторе. Этот пункт меню будет доступен теперь здесь всегда, не надо будет снова открывать Xcode чтобы получить доступ к симулятору. Основной файл, с которого начинается работа приложения, кстати, лежит в  lib/main.dart

Нажав на зеленый треугольник мы запустим сборку программы и запуск ее на симуляторе

Все, поздравляем!