Курс для новичков – Flutter Developer - Блок 3. Приступаем к работе с SDK Flutter

Урок 3. Приступаем к работе с SDK Flutter

Теперь, когда мы решили, что Flutter нам подходит, следующий шаг — получить инструменты, необходимые для создания приложений Flutter: Flutter SDK и компилятор Dart. Нам также понадобится IDE с плагином Flutter, а также инструменты для сборки и развертывания для различных платформ. Последнее означает Xcode для iOS и Android Studio для Android.

Для начала посетите https://flutter.dev/. Этот портал является источником истины для любых инструкций по установке или изменений API, которые происходят между публикацией этого курса Flutter Developer и временем его прохождения. Если есть какие-то противоречия, информация в flutter.dev всегда в приоритете.

Что вам нужно

  • Компьютер. Вы можете разрабатывать приложения Flutter в Windows, macOS, Linux или ChromeOS. Однако Xcode работает только на macOS, что делает Mac необходимым для создания и развертывания приложений для iOS.

Примечание: Из-за ограничений Xcode для macOS в этом курсе используется набор инструментов Flutter на Mac. Вы можете следовать этому на любой платформе по вашему выбору — просто пропустите любые шаги, специфичные для iOS или Mac.

Flutter Developer
  • Flutter SDK.
  • Редактор, такой как Android Studio или Visual Studio Code.
  • По крайней мере, одно устройство. Вы можете работать в симуляторе iOS или эмуляторе Android, но запуск приложений Flutter на физическом устройстве даст вам настоящий пользовательский опыт.
  • Учетные записи разработчиков (необязательно). Для развертывания в Apple App Store или Google Play Store вам потребуется действительная учетная запись на каждом из них.

Установка SDK Flutter

Первый шаг — загрузить SDK. Вы можете следовать инструкциям на flutter.dev или перейти прямо сюда: https://flutter.dev/docs/development/tools/sdk/releases

Следует отметить, что Flutter организует свой SDK вокруг каналов (channels), которые являются различными ветвями разработки. Новые функции или поддержка платформы будут доступны сначала на бета-канале (beta channel) для разработчиков. Это отличный способ получить ранний доступ к определенным функциям, таким как новые платформы или собственная поддержка SDK.

Для этого курса и развития в целом используйте стабильный канал (stable channel). Эта ветвь была проверена и протестирована, и у нее мало шансов «сломаться».

Следуйте инструкциям, чтобы загрузить SDK с https://flutter.dev/docs/get-started/install/macos#get-sdk. Установка так же проста, как разархивировать и поместить папку bin в свой путь. Текущая версия для курса — flutter_macos_2.10.3-stable.

Настройка Path Flutter в Windows 10

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

flutter help

В ответ вы должны увидеть основные справочные инструкции:

Окно терминала macOS при вызове flutter help
Окно терминала macOS при вызове flutter help

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

Установка компонентов SDK Flutter

В дополнение к SDK Flutter вам понадобятся Java, Android SDK, iOS SDK и IDE с расширениями Flutter. Чтобы облегчить этот процесс, Flutter включает в себя Flutter Doctor, который проведет вас через установку всех недостающих инструментов.

flutter doctor

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

Окно терминала macOS при вызове flutter doctor
Окно терминала macOS при вызове flutter doctor

В этом примере вывода Flutter Doctor выявил ряд проблем: в основном устаревший набор инструментов Android и отсутствие CocoaPods.

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

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

Успешное прохождение теста Flutter Doctor
Успешное прохождение теста Flutter Doctor

Примечания: Если предложения Flutter Doctor не работают, вам, возможно, придется вручную установить недостающие инструменты, такие как Java или Android Studio, следуя инструкциям на соответствующих веб-сайтах. Просто делайте это шаг за шагом. Настройка среды разработки — самая сложная часть работы с Flutter.

Настройка IDE

Команда Flutter официально поддерживает три редактора: Android Studio, Visual Studio Code и Emacs. Однако есть много других редакторов, которые поддерживают язык Dart, работают с командной строкой Flutter или имеют сторонние плагины Flutter.

В примерах этого курса используется Android Studio, но весь код и примеры будут работать в выбранном вами редакторе. Flutter Doctor все равно заставит вас установить эту IDE, чтобы получить все инструменты Android, поэтому использование Android Studio избавит вас от необходимости устанавливать дополнительные редакторы. Кроме того, Flutter Doctor скажет вам установить Android Studio плагин Flutter, который также запускает установку плагин Dart для Android Studio.

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

Как только вы пройдете через все flutter doctor шаги, у вас будет все необходимое для создания приложений Flutter в Android Studio. Если вы видите Создать новый проект Flutter (Create New Flutter Project) в окне приветствия Android Studio все готово.

Создать новый проект Flutter в окне приветствия Android Studio
Создать новый проект Flutter в окне приветствия Android Studio

Первое Flutter приложение

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

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

В Android Studio нажмите кнопку Создать новый проект Flutter. Оставьте выбранным приложение по умолчанию и нажмите кнопку Далее (Next) кнопка для перехода к следующему экрану.

В этом примере вы можете сохранить значения по умолчанию или изменить их на что-то более удобное. Нажмите на Далее кнопка для продолжения.

Выбор места установки Flutter SDK при создании нового проекта в Android Studio
Выбор места установки Flutter SDK при создании нового проекта в Android Studio

Параметры здесь позволяют включить поддержку платформы или изменить имя пакета. Подробнее об этих вариантах вы узнаете позже. А пока нажмите кнопку Готово (Finish).

Окно выбора свойств нового Flutter проекта в IDE Android Studio
Окно выбора свойств нового Flutter проекта в IDE Android Studio

Если вы используете код Visual Studio, процесс аналогичен. Чтобы создать новый проект, используйте командную палитру View ▸ … ▸ Flutter: Новый проект. После этого щелкните по появившейся форме проекта.

В любом из редакторов вы можете видеть всплывающие окна или сообщения о загрузке или обновлении различных инструментов и компонентов. Следуйте инструкциям, пока не разрешите сообщения. Например, баннер в Android Studio: ‘Pub get’ has not been run, «лечится» нажатием кнопки ‘Get dependencies’ (получить зависимости).

Окно нового проекта Flutter в IDE Android Studio
Окно нового проекта Flutter в IDE Android Studio

Проект шаблона

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

Чтобы попробовать, выберите подключенное устройство, симулятор iOS или эмулятор Android.

Выбор симулятор iOS в подключенных устройствах проекта
Выбор симулятор iOS в подключенных устройствах проекта

Запустите приложение, нажав на значок Run (выполнить):

Кнопка запуска flutter приложения
Run — кнопка запуска flutter приложения

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

Экран flutter приложения по умолчанию
Экран Flutter приложения по умолчанию

Поздравляем, вы сделали свое первое приложение Flutter! Нажмите на кнопку и посмотрите, как ответ инкремента обновляет метку.

Весь код для этого приложения находится в lib\main.dart в проекте по умолчанию. Не стесняйтесь взглянуть на него.

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

Попробуйте горячую перезагрузку

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

В main.dart, найдите следующее Text виджет:

const Text(
  'You have pushed the button this many times:',
),

Затем измените строку на: Ты столько раз нажимал на кнопку.

Вот не такая уж сложная часть: просто сохраните файл. Теперь посмотрите на запущенное приложение и понаблюдайте за изменениями.

Hot Reload (горячая перезагрузка) Flutter приложения
Hot Reload (горячая перезагрузка) Flutter приложения

Ваши изменения перезагружаются без остановки приложения и повторного развертывания.

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

Значок Hot Reload (горячая перезагрузка) Flutter приложения
Значок Hot Reload (горячая перезагрузка) Flutter приложения

Выводы и рекомендации

  • Флаттер — это инструментарий разработки программного обеспечения от Google для создания кросс-платформенных приложений с использованием языка программирования Dart.
  • С помощью Flutter вы можете быстро построить высококачественное приложение, которое эффективно выглядит.
  • Флаттер — это фреймворк для как для новичков, так и для опытных разработчиков, которые хотят запустить мобильное приложение с минимальными накладными расходами.
  • Установите Flutter SDK и связанные с ними инструменты с использованием инструкций, найденных по адресу https://flutter.dev.
  • В flutter doctor команда поможет вам установить и обновить инструменты Flutter.

Продолжить изучение ➤➤➤ Урок 4. Создание нового приложения

Похожие записи