Удалить flutter mac os

Обновлено: 02.07.2024

По-видимому, ни одна из команд флаттера не работает на терминале студии Android, и я считаю, что пытаюсь запустить ее в корне моего проекта.

попробуйте перейти к своему пути flutter / bin и введите ./flutter Если вы используете ZSH, добавьте код пути экспорта в файл .zshrc Я столкнулся с той же проблемой, даже с настройками профиля bash. Похоже, нам нужно закрыть и открыть терминал после завершения настройки.

Вам необходимо правильно настроить свой флаттер-путь.

Определите каталог, в котором вы разместили Flutter SDK. Это понадобится вам на шаге 3.
Открыть (или создать) $HOME/.bash_profile . Вы можете сделать это с помощью текстового редактора терминала, войдя в терминал и набрав nano

macOS Catalina по умолчанию использует оболочку Z, поэтому отредактируйте $ HOME / .zshrc.

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

Добавьте следующую строку и измените [PATH_TO_FLUTTER_GIT_DIRECTORY] путь, по которому вы клонировали репозиторий Flutter git:

нажмите CTRL X и когда он попросит вас сохранить файл, выберите да

Запустить, source $HOME/.bash_profile чтобы обновить текущее окно или перезапустить терминал

Убедитесь, что каталог flutter / bin теперь находится в вашем PATH, запустив: echo $PATH

Обратите внимание, что [PATH_TO_FLUTTER_GIT_DIRECTORY] вы установили Flutter SDK, а не местоположение вашего приложения.

Вместо nano вы можете использовать любой текстовый редактор для редактирования

Привет @Tree: После выполнения вышеуказанных шагов. А затем запустить echo $PATH получить результат: /Users/username/Documents/Project/Test/flutter/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Applications/Wireshark.app/Contents/MacOS:Users/username/Documents/Flutter/flutter/bin . Но у меня все еще та же ошибка при запуске flutter create -t module myapp_flutter Не работает при повторном открытии терминала, помогите пожалуйста. @ m3g4tr0n nope не решает проблему. Экспорт указанного выше пути в .bashrc вместо .bash_profile устранил мою проблему. @FutureJJ Обновление в .bashrc вместо .bash_profile тоже сработало для меня

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

добавить это в файл

Сохраните файл, Тада!

Это сработало. Просто чтобы расширить ответ. После добавления пути к файлу нажмите CTRL + X, Y, а затем ENTER. Теперь полностью закройте (Закройте) терминал и снова откройте его. Попробуйте команду flutter, и она должна работать Это единственный ответ, который у меня сработал. Спасибо! Чтобы прояснить для других новичков, вам нужно добавить «Users / yourUserName / yourPathToWhereYouInstalledFlutter / flutter / bin» (в моем случае «/ Development /» было «/ Developer / SDKs /»)

Проделайте следующие шаги:

Извлеките его куда хотите (например /home/development/flutter )

Задайте свой PATH, отредактируйте файл с помощью этой команды gedit

/.profile , вам нужно добавить эту строку

Я показал вам выше, где я извлек свой, поэтому мой экспорт будет выглядеть так

Сохраните файл и закройте его.
Беги, source

По-прежнему являются идеальным ответом на проблемы Manjaro и Arch base. спасибо, братан, это сработало для меня, однако для catelina я использовал .zshrc вместо .profile

Если вы используете zsh , вам необходимо выполнить следующие шаги в Mac.

Скачайте последнюю версию флаттера с официального сайта.
Разархивируйте его и переместите туда, $HOME где находится ваш Mac.
Добавить в путь через .zshrc файл
- запустить nano
Я использую Ubuntu 20.04. Решение сработало при использовании терминала ZSH, .bashrc и .bash_profile не работают, только .zshrc решает проблему
Сделайте это, чтобы постоянно добавлять флаттер на свой путь (в Ubuntu):
1. cd $HOME
2. gedit .bashrc
3. Добавьте строку:
в текстовый файл и сохраните его.
1. source $HOME/.bashrc
2. Откройте новый терминал и запустите flutter doctor команду
Воспользуйтесь функцией уценки в текстовом редакторе, чтобы немного структурировать свой ответ, чтобы другим было легче читать и понимать.
У вас должен быть файл .bash_profile и определить путь флаттера в файле .bash_profile .

Прежде всего, если у вас нет или вы не знаете .bash_profile , посмотрите мой ответ: Как мне отредактировать $ PATH (.bash_profile) в OSX?

Вы должны добавить строку ниже (. / flutter_SDK_path / flutter / bin) в свой .bash_profile

экспорт PATH = $ PATH: / home / username / Documents / flutter_SDK_path / flutter / bin

После этих шагов, вы можете написать флаттер коды , такие как, flutter doctor , flutter build ios , flutter clean или и т.д. в терминал Macbook.
У меня это тоже сработало! И он по-прежнему работает после перезапуска терминала
Mac OS Mojave; Проблема с путём Wireshark

Поскольку не могу комментировать, отвечаю:

В вашем терминале запустите:

Теперь используйте, I чтобы вставить и вставить следующее:

Используйте esc и введите, :wq! чтобы сохранить файл и выйти.

И убедитесь, что все в порядке, запустив:

Если вы используете MAC OS

Сначала найдите местоположение вашего flutter sdk

Файл SDK Flutter: напишите приведенную ниже команду на своем терминале, чтобы загрузить sdk flutter.

Например: имя файла SDK трепещет и находится в разделе "Загрузки".

Закройте и снова откройте свой терминал

и введите следующие команды в свой терминал

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

Раньше я описывал весь свой путь так:

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

Добавьте путь таким образом .bashrc для Linux и для Mac .bash_profile из Android SDK и инструментов с флаттером

Затем запустите эту команду

В Linux

На Mac

/.bash_profile или open -a TextEdit

Затем вы можете использовать любую команду flutter, например, создать apk для fluter.
Это сработало, ни один из других методов не сработал, магия заключалась в том, чтобы экспортировать путь в bashrc вместо любых других путей. Спасибо!! @RonyB. я не смог найти «окно текстового файла» в моем коде, пожалуйста, опишите
Я последовал проверенному ответу, но когда я перезапускаю терминал, команда flutter снова не распознается. мой путь bash_profile:

/Users/aldo/Projects/Framework/flutter/bin:$PATH с участием

затем я редактирую

export PATH=/Users/aldo/Projects/Framework/flutter/bin:$PATH без

и запустите снова, source $HOME/.bash_profile моя команда флаттера распознается, когда я перезапускаю терминал. надеюсь, это поможет другому

В macOS Catalina проблема связана с путем
1. Откройте Терминал и проверьте оболочку [команда: echo $ SHELL],
Если вывод / bin / bash

Нам нужно преобразовать в Zsh. Zsh является оболочкой по умолчанию только для вновь созданных учетных записей пользователей, поэтому любые существующие учетные записи, которые у вас есть на обновленном Mac, по-прежнему будут использовать Bash по умолчанию, если вы не измените его. просто запустите команду chsh -s (изменить оболочку) в окне Терминала.

[команда: chsh -s / bin / zsh]

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

2.1. Откройте файл zshrc [команда: vim

2.2. Нажмите 'I', чтобы вставить путь как [export PATH =

/ Dev / flutter / bin: $ PATH], здесь

/ Dev / - это папка, в которой установлен Flutter.

2.3. Нажмите клавишу ESC, а затем: wq, чтобы сохранить и закрыть файл.
1. Готово ! попробуйте [команда: трепещущий доктор]
Сразу после этого нам нужно открыть новый терминал. Последний шаг отсутствует Спасибо . это сработало на моей недавно установленной Catalina 10.15.6
В моем случае я помещаю эту строку export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH в файлы .bash_profile и .bashrc (помещаю ее в последнюю строку). После этого запускаем source .bash_profile и source .bashrc . Теперь работает !, даже если закрыть терминал.

В Mac есть два варианта решения этой проблемы.

Вариант 1: постоянное добавление пути к SDK flutter (он будет работать в любом сеансе терминала)

Загрузите SDK flutter и извлеките его в любом месте, а затем вам нужно добавить следующую строку в файл $ HOME / .bash_profile (по умолчанию скрытая папка).

export PATH = "$ PATH: [где загружен и извлечен sdk flutter] / flutter / bin"

например: export PATH = "$ PATH:

/ development / tools / flutter / bin"

Вариант 2: Если вы столкнулись с какими-либо трудностями с Вариантом 1, это намного проще, но вам нужно делать этот простой шаг каждый раз, когда вы перезагружаете свою систему / терминал.

Шаг 1. Перейдите по пути, по которому скачан и извлечен flutter SDK (например: cd

Шаг 2: введите эту команду

экспорт PATH = 'pwd' / flutter / bin: $ PATH

Вот и все. Наберите "flutter doctor", чтобы убедиться, что проблема решена. Удачного кодирования.

На Mac я выполнил шаги пользовательского Дерева, но все равно получил ответ «flutter: command not found». Затем я перешел в папку flutter / bin и внутри этой папки ctrl + щелкните исполняемый файл flutter и во всплывающем окне я открыл. После этого Mac уже распознал это как исключение, и команды флаттера уже работают.

В macOS Catalina оболочкой по умолчанию является Zsh. Я выполнил следующую команду в Терминале:
1. nano .zsh (откроет редактор командной строки)
2. экспорт PATH = "$ PATH: [PATH_TO_FLUTTER_GIT_DIRECTORY] / flutter / bin: $ PATH"
3. Сохраните файл, нажав «Control» + «O», затем нажмите «return»
4. «Control» + «X» для выхода
5. Перезапустите Терминал.
6. echo $ PATH
Я правильно добавил путь для Flutter, Java, Android Studio и Android SDK в файле .bashrc, но когда я запускаю flutter doctor, терминал возвращает

flutter: команда не найдена

Итак, сначала мне всегда приходилось бежать ->

Потом запускаем flutter doctor, все работает нормально.

Поэтому каждый раз, если я хочу запустить flutter doctor, я должен выполнить эти две команды.

Flutter SDK можно запускать как в Windows, так и в MacOs

Для Windows
1. Сначала загрузите поздний SDK со страницы загрузки flutter .
2. Теперь, чтобы запустить flutter в консоли Windows, вам нужно обновить переменную среды PATH.
3. В строке поиска «Пуск» введите «env» и выберите «Изменить переменные среды для своей учетной записи».
В разделе «Пользовательские переменные» проверьте, есть ли запись с именем «Путь»:

Для Mac

Сначала загрузите поздний SDK со страницы загрузки flutter

Распакуйте файл в желаемое место, используя следующие команды:

Добавьте к своему пути инструмент флаттера:

Беги, трепещущий доктор

Для Linux: чтобы постоянно помнить команды флаттера:

1.) откройте терминал и перейдите в $ HOME. например: username@linux:

2.) откройте скрытый файл в .bashrc желаемом редакторе. Он находится в $ HOME.eg. sudo gedit .bashrc

3.) добавьте следующую строку export PATH=/home/username/flutter/bin:$PATH где-нибудь как новую строку в файле .bashrc, желательно в качестве последней строки, отредактируйте и сохраните файл.

4.) запустите source /home/yourname/.bashrc в терминале, чтобы обработать последние изменения.

5.) наконец, запустите echo $ PATH, чтобы увидеть, что каталог flutter находится в вашем системном пути вместе с другими такими путями. например: /home/username/flutter/bin

В руководстве по установке флаттера сказано, что вы добавляете это:

VSC по какой-то причине не поддерживает pwd. Исправление:

если вы встретите эту ошибку в macOS и установите zsh, я решаюсь таким образом
1. в файле .zshrc
2. путь экспорта не используйте
Когда вы создали папку с Flutter SDK, откройте ее в Терминале, используя следующую команду:

Если папки разработки нет, сначала запустите эту команду:

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

Установка траектории инструмента Flutter

Чтобы настроить траекторию инструмента Flutter, вы должны выполнить эту команду:

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

В зависимости от оболочки выполните следующую команду: [Обратите внимание, команда, которую вы будете использовать, зависит от вашей оболочки.]

После этого в новом окне вам нужно добавить путь к инструменту флаттера.

Используйте следующую команду:

Следующее, что вам нужно сделать, это проверить зависимости Flutter.

Для этого выполните команду:

Эта операция поможет вам определить, есть ли какие-либо зависимости, которые вам нужно установить. После того, как результаты будут подготовлены, нажмите «Согласен» и дождитесь установки необходимых зависимостей для завершения настройки. введите описание изображения здесь

Деинсталляция приложений на Mac не такой очевидный процесс, как кажется на первый взгляд. А все потому, что в macOS в отличие от iOS существует возможность установки ПО не только из виртуального магазина приложений App Store, но и программ, загруженных с сайтов самих разработчиков.

Как удалять приложения с Mac (macOS), загруженные из Mac App Store

1. Запустите приложение Launchpad. Обычно его иконка находится в Dock-панели.

Можно также открыть Launchpad из папки Программы или воспользовавшись поиском Spotlight (для вызова нажмите сочетание клавиш Сtrl + Пробел или в некоторых случаях ⌘Cmd + Пробел).

2. После запуска Launchpad на мониторе компьютера появится экран с иконками приложений подобный iOS.

3. Для перехода в режим удаления приложений, нажмите и удерживайте в течение 2-3 секунд любую иконку (как в iOS), после чего иконки начнут покачиваться, а в левом углу некоторых из них появится крестик.

Крестик появится только на тех приложениях, которые были загружены из Mac App Store. C другой стороны, некоторые родные системные приложения macOS, а также программы, установленные из других источников не будут иметь крестика. Как удалить такие программы, рассказывается ниже.

4. Нажмите на крестик для удаления приложения.

Кроме того, удалять приложения в macOS можно и при помощи встроенного инструмента «Оптимизация хранилища». Об этом способе рассказывается ниже.

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

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

Примечание. Для начала используйте специальные программы для удаления приложений.

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

Для некоторых приложений деинсталлятор можно загрузить из интернета. Иногда деинсталлятор находится в образе «.dmg» вместе с файлом самого приложения.

Способ 1. Как удалить программы и связанные с ними файлы с помощью сторонних приложений

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

Посетите эту страницу, чтобы скачать AppCleaner. Выберите версию программы, соответствующую вашей ОС (как узнать версию macOS).

Переместите загруженный файл AppCleaner.app в папку Программы на Mac.

Перетащите значок приложения из папки Программы в окно AppCleaner.

CleanMyMac — популярное мощное платное приложение, позволяющее производить комплексную очистку macOS. При помощи данного инструмента можно удалять кэши, находить другие ненужные файлы, такие как устаревшие резервные копии и просто большие файлы, а также правильно деинсталлировать программы с удалением всех системных «хвостов».

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

Способ 2. Как удалять программы на Mac (macOS) при помощи встроенного инструмента (только для macOS 10.12 и новее)

Начиная с macOS Sierra разработчики Apple внедрили утилиту «Оптимизация хранилища», которая позволяет централизованно управлять информацией на Mac.

1. Откройте меню  → Об этом Mac.

2. Перейдите на вкладку «Хранилище».

4. В левом боковом меню выберите раздел «Программы».

5. Для удаления программы, подведите курсор к ее наименованию и справа от него отобразится крестик. Кликните по нему. Все!

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

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.9), который обещает разные вкусности и, в том числе, раннюю поддержку веб-приложений.

На работе я занимаюсь разработкой мобильных приложений на React Native, но с любопытством поглядываю на Flutter. Для тех, кто не в курсе: на Flutter уже сейчас можно создавать приложения для Android и iOS, готовится к релизу поддержка веб-приложений, а ещё в планах поддержка десктопа.

Покрутив пару дней в голове мысли о том, какое приложение можно попробовать сделать, я решил выбрать задачу со звёздочкой — что нам эти проторенные дорожки? Замахнёмся на десктоп и будем героически преодолевать трудности! Забегая вперёд, скажу, что трудностей почти не возникло.

Под катом — рассказ о том как я решал привычные для React Native программиста задачи средствами Flutter, плюс общее впечатление от технологии.

Размышляя о том, какие возможности Flutter хотелось бы «пощупать», я решил, что в моём приложении должны быть:
- запросы к удаленному API;
- переходы между экранами;
- анимация переходов;
- менеджер состояния — redux или что-то подобное.
Подготовка

Поскольку команда flutter create пока не умеет создавать проект для Windows/Linux (на данный момент поддерживается только Mac, для этого используйте флаг --macos ), приходится использовать этот репозиторий, где имеется подготовленный пример. Клонируем репозиторий, забираем оттуда папку example , если нужно — переименовываем и дальше работаем в ней.

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

Кроме того, нужно указать Flutter, что он может использовать вашу платформу:

Если всё прошло хорошо, то выполнив команду flutter doctor вы должны увидеть похожий вывод:

Итак, декорации готовы, зрители в зале — можем начинать.

Вёрстка

Первое, что бросается в глаза после React Native — это отсутствие специального языка разметки а ля JSX. Flutter заставляет вас писать и разметку, и бизнес-логику на языке Dart. Поначалу это раздражает: взгляду не за что зацепиться, код кажется громоздким, да ещё эти скобочки в конце компонента!

И это ещё не предел! Стоит удалить одну не в том месте и приятное (нет) времяпрепровождение вам гарантировано.

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

Особенность же эта заключается в том, что в Flutter стили — это такие же компоненты (если быть точнее — виджеты).

Если в React Native для расположения трёх кнопок в ряд внутри View так, чтобы они равномерно распределили пространство контейнера, мне достаточно для View в стилях указать flexDirection: 'row' , а для кнопок добавить в стили flex: 1 , то в Flutter есть отдельный компонент Row для расположения элементов в ряд и отдельный — для «расширяемости» элемента на всё доступное пространство: Expanded .

В результате, вместо

нам приходится писать так:

Более многословно, не правда ли?

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

В Flutter нам придётся добавить в аргументы контейнера что-то такое:

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

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

Во-вторых, очень сильно помогает плагин Flutter в VS Code — на картинке выше комменты к скобкам подписывает сам плагин (и они неудаляемые), что помогает не запутаться в скобках. Плюс средства автоформатирования — через полчаса привыкаешь периодически нажимать Ctrl+Shift+I , чтобы отформатировать код.

К тому же, синтаксис языка Dart во второй редакции стал гораздо приятнее, так что к концу дня я уже получал удовольствие от его использования. Непривычно? Да. Но не неприятно.

Запросы к API

В React Native для получения данных с какого-нибудь API мы обычно используем метод fetch , который возвращает нам Promise .

Объект Future по смыслу очень похож на Promise, поэтому здесь всё довольно прозрачно. Ну а для сериализаци/десериализации json объектов можно использовать концепцию классов-моделей со специальными методами fromJSON / toJSON . Подробнее об этом можно прочитать в документации.

Переход между экранами

Несмотря на то, что я делал десктоп-приложение, с точки зрения Flutter нет никакой разницы на какой платформе он крутится. Ну то есть, в моём случае это так, в общем — не знаю. Фактически, системное окно, в котором запускается flutter приложение — это такой же экран смартфона.

Переход между экранами выполняется достаточно тривиально: создаем класс-виджет экрана, а затем пользуемся стандартным классом Navigator .

В простейшем случае это может выглядеть как-то так:

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

Кроме того, вы можете подготовить специальную анимацию для перехода между экранами и написать что-то такое:

Здесь ScaleRoute — это специальный класс для создания анимаций перехода. Неплохие примеры таких анимаций можно найти здесь.

State managment

Бывает, что нам нужно иметь доступ к каким-нибудь данным из любой части нашего приложения. В React Native для этих целей часто (если не чаще всего) используют redux .

Для Flutter есть репозиторий, в котором приведены примеры использования различных архитектур приложения — есть там и Redux, и MVC, и MVU, и даже такие, о которых я раньше не слышал.

Покопавшись немного в этих примерах, я решил остановиться на Provider .

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

Для этого добавляем в pubspec.yaml пакет provider и готовим класс Provider. В моём случае он выглядит так:

Здесь Rate — это мой класс-модель валюты (с полями name , code , value и т.п.), currentrate — поле, в котором будет хранится выбранная валюта, а setCurrentRate — метод, с помощью которого обновляется значение currentrate .

Чтобы присоединить наш провайдер к приложению, изменим код класса приложения:

Всё, теперь если мы хотим сохранить выбранную валюту, то пишем что-то такое:

А если хотим получить сохраненное значение, то такое:

Всё достаточно прозрачно и никакого бойлерплейта (в отличие от Redux). Само собой, может быть для более сложных приложений всё окажется не так гладко, но для таких как мой пример — чистый вин.

Сборка приложения

«Не больно-то и хотелось», подумал я, ужаснулся весу папки build — 287,5 МБ — и по простоте душевной удалил эту папку безвозвратно. Как оказалось — зря.

После удаления директории build проект перестал запускаться. Восстановить я её не мог, поэтому скопировал из исходного примера. Не помогло — сборщик ругался на недостающие файлы.

После проведения небольшого исследования выяснилось, что в этой папке есть файл snapshot_blob.bin.d , в котором, судя по всему, прописаны пути ко всем файлам, используемым в проекте. Я дописал недостающие пути и всё заработало.

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

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

Бонус

Переходим к обещанному бонусу.

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

Наверняка есть менее варварский способ, но я решил, что самый короткий путь — прямой. Поэтому просто создал новый проект Flutter, перенёс в него файл pubspec.yaml , директории assets , fonts и lib и добавил в AndroidManifest.xml строку:

Приложение запустилось с полпинка и я получил такую

С вебом поначалу пришлось повозиться. Я не знал как создавать веб-проект, поэтому воспользовался инструкциями из интернета, которые почему-то не работали. Хотел было уже плюнуть, но наткнулся на этот мануал.

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

Затем я таким же варварским способом перенёс нужные файлы в этот проект и получил такой

Общие впечатления

Поначалу работать с Flutter было непривычно, я постоянно пытался применять привычные подходы из React Native и это мешало. Кроме того, немного раздражала некоторая избыточность кода на dart.

После того как немного набил руку (и шишек), мне стали видны преимущества Flutter перед React Native. Перечислю некоторые.

Язык. Dart вполне понятный и приятный язык со строгой статической типизацией. После JavaScript он был как глоток свежего воздуха. Я перестал бояться, что мой код сломается в рантайме и это было приятное ощущение. Кто-то может сказать, что есть Flow и TypeScript, но это всё не то — в наших проектах мы использовали и то, и другое и всегда где-нибудь что-нибудь ломалось. Когда я пишу на React Native, то не могу отделаться от ощущения, что мой код стоит на подпорках из спичек, которые могут сломать в любой момент. С Flutter я забыл про это ощущение, и если цена — избыточность кода, то я готов её заплатить.

Платформа. В React Native вы используете нативные компоненты и это в целом хорошо. Но из-за этого вам иногда приходится писать код, специфичный для платформы, а также отлавливать баги, специфичные для каждой из платформ. Это может быть невероятно утомительно. С Flutter вы можете забыть эти проблемы как страшный сон (хотя может быть, что в крупных приложениях всё не так гладко).

Окружение. С окружением в React Native всё грустно. Плагины vscode постоянно отваливаются, отладчик может сожрать 16 гигов оперативы и 70 гигов свопа, намертво повесив систему (из личного опыта), а самый частый сценарий исправления ошибок: «удали node_modules, установи пакеты заново и попробуй перезапустить несколько раз». Обычно это помогает, но блджад! Не так должно быть, не так.

Кроме того, вам периодически придётся запускать AndroidStudio и XCode, потому что некоторые либы ставятся только так (справедливости ради, с выходом RN 0.60 с этим стало получше).

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

Кроссплатформенность. React Native исповедует принцип «Learn once, write everywhere» — однажды научившись, вы сможете писать под разные платформы. Правда, под каждой платформой вы столкнётесь со специфичными для неё проблемами. Но возможно это лишь следствие незрелости React Native — на текущий момент последней стабильной версией является 0.61. Может быть с выходом версии 1.0 большинство этих проблем уйдёт.

Подход Flutter больше похож на «Write once, compile everywhere». И пусть на текущий момент десктоп не готов к продакшену, веб пока тоже в альфе, но всё идёт к этому. А возможность иметь единую кодовую базу для всех платформ — это сильный аргумент.

Само собой, Flutter тоже не лишён недостатков, но малый опыт его использования не позволяет мне их выявить. Так что если хотите более объективной оценки — смело делайте скидку на эффект новизны.

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

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