Как установить flutter на mac os

Обновлено: 23.01.2025

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

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

Порадуйте своих пользователей встроенными в Flutter красивыми виджетами Material Design и Cupertino (в стиле iOS), богатыми API-интерфейсами управления движением, плавной, естественной прокруткой и осведомленностью о платформе.

Мы используем Flutter 1.0 для этой демонстрации установки. Итак, давайте посмотрим, как установить Flutter на Mac.

Как установить Flutter на Mac

Если мы хотим установить и запустить Flutter, наша среда разработки должна соответствовать следующим минимальным требованиям.

Операционные системы : macOS (64-разрядная версия)
Дисковое пространство : 700 МБ (без дискового пространства для IDE/инструментов).
Инструменты : Flutter зависит от того, доступны ли в вашей среде эти инструменты командной строки.
- bash , mkdir , rm , git , curl , распаковать , which
Шаг 1. Получите Flutter SDK

Вы можете загрузить Flutter SDK отсюда.

Теперь вам нужно распаковать этот пакет. Вы можете переместить эту распакованную папку в проект, где вы сохраните все другие папки проекта, или остаться там, где она была.

Добавить флаттер в путь mac

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

Итак, откройте .bash_profile или .zshrc и добавьте к нему путь следующего вида.

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

Шаг 2. Запустите Flutter Doctor

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

Итак, вот Он показывает мне правильный путь. Теперь выполните следующую команду.

Вы увидите что-то вроде этого.

Приведенная выше команда проверяет вашу среду и отображает отчет в окне терминала. Dart SDK поставляется вместе с Flutter; нет необходимости устанавливать Dart отдельно.

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

Шаг 3. Установка Android

Однако вы также можете напишите свои приложения Flutter в некоторых редакторах, например, я использую Visual Studio Code. Но нам нужна студия Android для создания виртуальных устройств Android и некоторых других зависимостей.

Установить Android Studio
1. Загрузите и установите Android Studio.
2. Запустите Android Studio и пройдите через «Мастер установки Android Studio». Это устанавливает последний Android SDK, Android SDK Platform-To ols и Android SDK Build-Tools, которые требуются Flutter при разработке приложения Flutter для Android. Если вы уже установили, обновите его до последней версии, а также все другие SDK.
Настройте эмулятор Android

Теперь, чтобы запустить и протестировать приложение Flutter на эмуляторе Android, выполните следующие действия.

Шаг 4: Настройка IOS

Если мы хотим разрабатывать приложения Flutter для iOS, вам понадобится Mac с Xcode 9.0 или новее. Я использую XCode 10. 1

Настройте симулятор iOS

Мы можем подготовиться к запуску и протестировать ваше приложение Flutter на симуляторе iOS, следуя этим шаги:
Шаг 5: Создайте новый проект Flutter

Как я уже сказал, я использую код Visual Studio для этого проекта. Я хотел бы открыть его и создать новый проект из Visual Studio Code. Теперь следуйте инструкциям в Visual Studio Code.
1. Вызов View> Command Palette .
2. Введите «flutter» ”И выберите Flutter: New Project .
3. Введите имя проекта, например app, и нажмите Enter .
4. Создайте или выберите родительский каталог для новой папки проекта.
5. Дождитесь завершения создания проекта и появления файла main.dart.
Это приведет вас к файловой системе, в которой вы можете создать папку проекта, и все остальное сделает редактор, и он создаст совершенно новый проект.

Теперь перейдите в корень проекта внутри вашего терминала и введите следующую команду.

Flutter — новый инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах (например, на Android или iOS) с общей кодовой базой.

Сам инструмент написан на C и C++. Предоставляет движок для 2D рендеринга, React-подобный FRP фреймворк и набор виджетов в стиле Material Design. На данный момент распространяется версия alpha:0.0.20, но несмотря на довольно "сырую" версию, уже можно создавать продвинутый интерфейс, работать с сетью и даже с файловой системой.

Подход Flutter отличается от инструментов, работающих через WebView и выполняющих HTML, CSS и Javascript (например Cordova), — он заключается в использовании Dart как единственного язык программирования. Dart довольно прост в изучении, а если вы ещё и знаете Java, то, считайте, 75% работы сделано, и на Dart можно перейти всего за пару дней.

Приложения компилируются в нативный код при сборке для релиза. Благодаря этому повышается производительность и уменьшается задержка при работе с интерфейсом. При сборке в режиме отладки (и выявлении возможных багов) Flutter также выполняет некоторые задачи, которые могут замедлять приложение. В таких случаях Flutter будет показывать надпись “Slow Mode” в правом верхнем углу экрана.

Почему именно Flutter?

Кроме того, что вы делаете приложение сразу под несколько систем (Android и iOS), код Flutter очень выразителен. То есть потребуется написать меньше кода чем если бы вы писали нативное приложение под одну платформу.

Производительность и отклик пользовательского интерфейса.

Ещё один плюс Flutter — он ориентирован на Material Design и предоставляет множество возможностей для работы с ним.

Google также использует Flutter для разработки пользовательского интерфейса своей новой системы Fuchsia.

Установка

Так как Flutter ещё в процессе разработки и постоянно обновляется, процесс установки со временем может поменяться. Актуальную инструкцию по установке можно найти на сайте Flutter.

Мы будем пользоваться версией 0.0.20+.alpha. (Прим.перев.: на данный момент установка возможна только под Mac и Linux (64-bit))

Шаг 1. Клонирование

Клонируйте ветку alpha из репозитория Flutter при помощи Git (SourceTree, Github Desktop…) и добавьте директорию bin в PATH.

Шаг 2. Проверка зависимостей

Запустите Flutter doctor, чтобы установить все необходимые зависимости.

Шаг 3. Установка платформ

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

В случае с Android необходимо установить Android SDK. Можете просто установить Android Studio, SDK будет в комплекте. В случае, если Android Studio установлена не в директорию по умолчанию, необходимо добавить переменную ANDROID_HOME в PATH, указав новое расположение, куда был установлен SDK.

В случае с iOS необходим xCode версии 7.2 или выше. Для запуска приложений на физическом устройстве необходим дополнительный инструмент. Его можно установить при помощи Homebrew.

Шаг 4. Конфигурация Atom

Рекомендуется использовать текстовый редактор Atom с установленными плагинами Flutter и Dart.

Установка плагина Flutter для Atom:
- Запустите Atom.
- Packages > Settings View > Install Packages/Themes.
- Напишите в поле Install Packages слово ‘flutter’, затем нажмите кнопку Packages.
- Выберите Flutter и установите.
Откройте Packages > Flutter > Package Settings и выставьте в FLUTTER_ROOT путь, куда был склонирован Flutter SDK.

Затем Packages > Dart > Package Settings и выставьте переменную с расположением dart sdk, обычно это bin/cache/dart-sdk в директории Flutter.

Если у вас Mac, запустите Atom > Install Shell Commands чтобы установить shell-команды.

И напоследок запустите ещё раз Flutter doctor, чтобы удостовериться, что всё в порядке.

Вывод из консоли ниже показывает, что процесс установки успешен, но среда iOS ещё не отвечает всем необходимым требованиям.

Первые шаги (Пишем Hello World!)

Давайте создадим простенькое приложение и посмотрим Flutter в действии. В последующих статьях примеры будут куда сложнее и увлекательнее.

Запустите Packages → Flutter → create new Flutter Project. В директории lib есть файл main.dart, откройте его и сотрите весь код.

Выполнение кода Dart начинается с функции main, которая должна быть включена в файл main.dart.

Теперь импортируем библиотеку material, она предоставляет нам функцию для запуска приложений.

Эта функция называется runApp и принимает виджет (Widget) в качестве параметра. Виджет можно сравнить с представлением (View) в Android или iOS, чтобы иметь общее представление, но, само собой, между ними есть и отличия. То есть в Flutter весь интерфейс строится на использовании виджетов и весь код пишется на Dart. Например в Android надо было бы использовать XML для описания представлений.

Начнём с того, что выведем при помощи виджета Text произвольный текст.

Теперь запускаем приложение через Atom.

Как видно, текст появился за статус-баром. Так произошло потому, что туда установлены координаты Flutter (0,0).

В примере выше создан виджет Padding, в котором отступы установлены на 24 при помощи объекта EdgeInsets, а в качестве дочернего элемента указан виджет Text. Запустите приложение и увидите, что текст теперь ниже.

Примечание: если вы знакомы с Java, то имейте в виду, const EdgeInsets.only(top: 24.0) всего лишь вызов конструктора EdgeInsets. Он возвращает экземпляр объекта, который будет константой времени компиляции. В этом разница между Java и Dart, больше информации о конструкторах в Dart можете найти здесь.

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

Оба виджета, Padding и Center, предоставляют атрибут, называемый child, используемый для указания дочернего элемента. На самом деле это одна из особенностей, делающих Flutter таким мощным инструментом. Каждый виджет может иметь дочерние элементы, благодаря чему одни виджеты могут быть вложены в другие виджеты. Так, например, Text может быть вложен в Padding, который будет вложен в Center.

Заключение

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

Flutter представляет фреймворк от компании Google, который позволяет создавать кроссплатформенные приложения, которые могут использовать однин и тот же код. Спектр платформ широк - это веб-приложения, мобильные приложения под Android и iOS, графические приложения под настольные операционные системы Windows, MacOS, Linux, а также веб-приложения.

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

В качестве языка разработки используется язык программирования Dart.

При постороении приложения Flutter транслирует код на Dart в нативный код приложения с помощью Dart AOT (компиляция приложения перед его запуском), которое можно запускать на Android или iOS или другой платформе. Однако при разработке приложения для ее ускорения Flutter использует JIT (компиляция приложения в процессе его запуска).

Надо отметить, что Flutter относительно новый фреймворк. Хотя прототип фреймворка появился еще в 2015 году, а первая альфа-версия вышла в мае 2017 года, но первый стабильный релиз - Flutter 1.0 увидел свет только в декабре 2018 года. Тем не менее регулярно с небольшой периодичностью ыходят подверсии, добавляя новую функциональноть и исправляя имеющиеся баги. На момент публикации данной статьи последней стабильной версией является Flutter 2, которая вышла в марте 2021 года, но постоянно выходят новые подверсии, которые также привносят нововведения во фреймворк (например, на момент написания данной статьи последней подверсией является 2.5).

Что используется для разрабоки под Flutter? Для для написания кода программы можно использовать любой полюбившийся текстовый редактор и затем с помощью утилит командной строки из Flutter SDK компилировать приложение. Однако для таких сред как Android Studio и IntelliJ IDEA, а также текстового редактора Visual Studio Code компания Google выпустила специальные плагины, которые позволяют упростить разработку. Поэтому зачастую для разработки под Flutter используются именно Android Studio и IntelliJ IDEA.

Установка Flutter SDK

Установка Flutter на Windows

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

Далее распакуем архив, например, на диске С. Например, в моем случае архив распакован в папку C:\flutter .

В распакованном архиве в папке flutter\bin мы найдем инструменты для компиляции приложения. Например, в моем случае полный путь к этой папке C:\flutter\bin :

Если мы работаем в Windows, то для добавления переменной среды через поиск найдем найдем параметр "Изменение переменных среды текущего пользователя". Для этого введем в поле поиска "Изменение переменных":

Выберем пункт "Изменение переменных среды текущего пользователя". Затем нам откроется окно, где мы можем увидеть все переменные среды. (Также можно перейти через Параметры и пункт Система ->Дополнительные параметры системы ->Переменные среды )

Здесь нам надо изменить переменную Path, добавив путь к папке bin в Flutter SDK. Для этого выберем пункт Path и нажмем на кнопку "Изменить":

Далее нажмем на кнопку "Создать" и появившееся поле ввода введем путь к папке bin из Flutter SDK:

Чтобы проверить корректность установки Flutter, откроем командную строку и введем команду flutter . Если Windows распознает ее, и последует вывод некоторой справочной информации (например, как использовать те или иные команды в консоли), то flutter установлен и настроен.

В качестве альтернативы установить Flutter SDK можно через Git. Для этого необходимо в командной строке перейти к папке, где должен располагаться SDK и далее выполнить в командной строке следующую команду:

В данном случае с репозитария на гитхабе будет загружена последняя стабильная версия Flutter SDK. И опять же подчеркиваю, что для выполнения этой команды необходимо установить Git for Windows, как было написано выше.

Установка Flutter на MacOS

Для установки и обновления Flutter использует git , поэтому необходимо установить git. Однако если установлен Xcode , то git устанавливать не надо, так как Xcode уже включает git.

Далее поместим папку с Flutter SDK где-нибудь на жестком диске. Например, в моем случае Flutter SDK расположен в корневой папке текущего пользователя ( Users/eugene ).

Для использования Flutter SDK в треминале, необходимо добавить путь к папке bin в SDK в системные переменные. Добавление для текущего окна терминала:

При первом использовании команды flutter произойдет загрузка Dart SDK.

Обновление Flutter

Если впоследствии необходимо будет обновить Flutter, то для этого достаточно будет выполнить в командной строке команду

Первый опыт Flutter (1) - Установка и настройка Mac

Установка и настройка Flutter на Mac

1. Скачайте Flutter SDK.

clone Flutter

1. Используйте git для клонирования проекта Flutter в локальный, а затем добавьте Flutter в локальные переменные среды,

2. Перейдите по пути, сохраненному Flutter.

2.1. Если загрузка не удалась, Google предоставит зеркало для Китая.

Run flutter doctor

бегать Flutter doctor Команда для проверки необходимости установки зависимостей и завершения установки

Эта команда проверит среду и отобразит отчет в окне. Dart SDK входит в комплект Flutter, отдельно устанавливать Dart не требуется. Дважды проверьте вывод, нужно ли вам установить другое программное обеспечение или выполнить другие задачи

Если ничего не происходит, отчет выглядит следующим образом:

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

Далее я расскажу, как выполнять эти задачи и завершить процесс установки. Если вы решите использовать IDE, которую можно использовать для IntelliJ IDEA, Android Studio и VS Code, вы увидите flutter doctor Выходной процесс.

После того, как вы установили все недостающие зависимости, запустите flutter doctor Команда для проверки того, что вы все настроили правильно.

2. Получите путь к файлу

После загрузки Flutter SDK получите путь установки Flutter SDK: / Users / Username / flutter. Обратите внимание, что в папке flutter есть несколько папок flutter с одинаковыми именами. Путь SDK - только к верхней папке flutter Для конкретных шагов см. GIF, сделанный пользователями сети.

Управление открытыми файлами

Введите каталог sdk

Получить полный путь к файлу

3. Установите плагины Flutter и Dart.

Возьмите AndroidStudio в качестве примера, откройте панель настроек, найдите Flutter, установите плагины, установите Dart автоматически во время установки и перезапустите AndroidStudio после установки.

После перезапуска AndroidStudio новый проект Flutter появляется в File-> New, указывая на успешную установку.

4. Создайте проект Flutter.
- File -> New -> New Flutter Project, выберите Flutter Application -> Next, здесь обратите внимание на правильность пути к Flutter SDK
- Далее -> Настройте домен компании, Готово и Создание проекта, подождите несколько минут, проект инициализируется, вновь созданный проект предоставляет интерфейс по умолчанию, запустите его напрямую, посмотрите на работающий интерфейс:
На этом настройка среды Flutter завершена, пример также можно запустить и продолжить изучение разработки Flutter.

Читайте также: