Евгений Третьяков

Евгений Третьяков 

Flutter Developer, Full Stack

3subscribers

11posts

goals3
$0 of $1 920 raised
На макбук
$0 of $1 408 raised
Полгода аренды сервера со 128 Гб ОЗУ для реализации проекта собственного узла дешевого бэкэнда для проектов на Dart\Flutter
$0 of $640 raised
Тестирование новых коммерческих сервисов в связке с Flutter (оплата лицензий, абонентской платы и т.п.)

Установка Flutter на компьютер с 4 Гб RAM и HDD (март 2023)

Если так получилось, что Ваш компьютер не обновлялся последние лет 5, и это не Mac, то у вас все еще есть шансы получить более-менее комфортную среду разработки.
С учетом того, что типовой проект на Flutter это где-то 20 тысяч файлов, то наиболее важным улучшением рабочей машины будет приобретение хотя бы дешевенького SSD. Опять же, 4 гигабайта ОЗУ - это однозначное использование файла подкачки, который, опять же, на жестком диске.
Традиционная Windows здесь противопоказана как минимум по трем причинам:
1. Она постоянно чем-то занята в фоне
2. В ней практически невозможно отключить антивирус, который в нашем случае бесполезен
3. Сама по себе винда сжирает почти два гига оперативки, половину от того что имеем
Выход тут один: ставим линукс. Его очень легко поставить рядом с Windows, вы не заметите никаких дополнительных тормозов и ограничений (кроме того, что для установки Linux "откусит" часть диска). Я далее покажу, как это делается.
Я протестировал несколько максимально "легких" дистрибутивов, оценивая в том числе комфорт для людей, которые до этого видели только винду.
Мой выбор пал на Manjaro XFCE Desktop (https://manjaro.org/download/), который сочетает в себе простоту установки, легкость использования и максимальную скорость работы.
Android Studio с запущенным начальным проектом на смартфоне "скушал" 2,1 гигабайта оперативки. Это не рекорд, но комфортная работа уже реальна.
Тем не менее, что вас ждет при использовании Linux на системе с 4Gb RAM и HDD:
1. первая компиляция проекта - около 30 минут. Потом все будет быстро
2. нельзя пользоваться эмулятором - только реальный смартфон на базе Android
3. браузер - Midori, так как Firefox/Chrome/Yandex заклинят ваш компьютер лучше ручного тормоза
4. максимум один открытый за раз проект в Android Studio
5. собственно, работать будут только две программы - браузер и среда разработки, остальное уже непозволительная роскошь
6. первоначальная подготовка системы к работе займет до трех часов времени.
1. Качаем и записываем дистрибутив
(ВАМ ПОТРЕБУЕТСЯ USB ДИСК 4GB или более)На сайте https://manjaro.org/download/ вас спросят сначала про выбор архитектуры, ваш выбор - x86_64
Потом нажимаем на кнопку Download под центрально плашкой, XFCE Desktop выбираем, как хотим скачать файл. Через торрент это будет быстрее, но если не умеете пользоваться торрентами - то нажимаем на кнопку Image и качаем файл классическим способом
Далее качаем программу для записи установочной флэшки, Rufus https://rufus.ie/ru/
Можно скачать переносную версию, так как программа не требует установки.
Далее, когда у нас докачается ISO образ нашего Manjaro XFCE, вставляем флэшку на 4Гб или более и запускаем скачанный Rufus. Флэшка будет полностью переформатирована, поэтому если там есть что-то нужное, то надо это скопировать с нее заранее.
В открывшемся окне Rufus нажимаем кнопку ВЫБРАТЬ и выбираем скачанный ISO образ линукса
Если программа спросит что-то вроде вот этого -
соглашаемся. Вообще, соглашаемся на все. В итоге окно будет выглядеть примерно так:
Сами от себя ничего не меняем, нажимаем на "старт" и ждем, пока не закончится. Затем перезагружаем компьютер и загружаемся с флэшки.
2. Загружаемся с флэшки и устанавливаем Линукс
Чаще всего для этого надо сразу после включения компьютера быстро и ритмично нажимать кнопку F10 или F12 (на некоторых ESC) и у Вас появится меню выбора диска загрузки. На некоторых компьютерах придется сначала зайти в BIOS и выбрать там в разделе BOOT первым вашу флэшку.
В BIOS можно попасть по нажатию кнопки DEL, F2, ESC - тоже все зависит от модели компьютера.Если не знаете наверняка - придется потратить некоторое время, чтобы разобраться самостоятельно.
Соответственно, и меню выбора диска тоже будет выглядеть по-разному, у меня на ноутбуке оно вот такое:
У меня два разных жестких диска, а сама флэшка определилась и внешний жесткий диск, и как UEFI устройство (нижняя строка). Загружаемся с нее.
Откроется меню, где можно будет поменять язык установки. Раскладку клавиатуры я рекомендую здесь не трогать
После этого загружаемся одной из двух строк - с пропиетарными драйверами (на картинке выделена) или с драйверами open source.
Пропиетарные драйвера - это коммерческие программы от NVIDIA и ATI, иногда - INTEL, с которым ваш компьютер может работать лучше. Если вы выбрали этот пункт и система не смогла загрузиться - что же, вам остаются open source драйвера.
На моем ноуте, опять же, пропиетарные не заработали, хотя и дискретная видеокарта.
После некоторого непродолжительного времени система загрузится, и вы увидите почти привычный вид:
На что здесь надо обратить внимание: установка системы производится ярлычком на рабочем столе, тут все просто. Аналог кнопки "пуск" на своей месте, там все русифицировано (хотя и несколько мусорно).
Справа вверху нам сообщают, что есть доступные WiFi сети и мы можем к ним подключиться (просмотреть доступные по кнопке справа внизу).
Самое здесь необычное - наличие двух (и более) рабочих столов. Это удобно для организации работы, что-то подобное реализовано на Mac только более убого. Поэтому если вдруг пропадут ранее открытые окна - проверьте, может Вы нечаянно переключились на второй рабочий стол (селектор справа внизу).
Итак, сначала подключаемся к интернет.
Для этого справа внизу около часов нажимаем на кнопку (помечена стрелочкой),  выбираем нужную сеть и вводим пароль
Если все успешно - запускаем установку. Откроется вот такое окно
После ожидания нажимаем "Далее" и попадаем на второй экран, где выбираем часовой пояс
Потом - раскладка клавиатуры. По умолчанию, раскладка меняется сочетанием Alt+Shift, потренироваться можно в строке внизу
Следующий экран - очень важный. Теоретически, здесь можно уверенным жестом уничтожить все предыдущие данные на своем компьютере. Вы же сохранили все самое важное в облаке или на другой флэшке, прежде чем начать, правда?
Я вот не сохранял. Итак, разметка диска:
Если у вас больше одного физического диска - вверху можно выбрать, куда планируется ставить Linux
Ниже ОБЯЗАТЕЛЬНО выбираем пункт "установить рядом", все остальное даже не рассматривается
Шифрование НЕ включаем, у нас и так медленный комп
Наконец, внизу мышкой определяем, сколько места мы готовы отдать под линукс. Рекомендую гигабайт 50, лучше - больше, если позволяет.
Все, нажимаем "Далее", еще раз сильно переживаем, что не сохранили важные данные, и переходим к экрану ввода личных данных
Ставим две галочки внизу, как у меня, пароль можете назначить 1234 (если хотите), ну и старайтесь все писать латинскими буквами. После этого смотрим, как летит ракета в зеленое небо....
...и перезагружаемся, когда все будет готово.
3. Настраиваем линукс
Если у вас два жестких диска и опять загружается Windows, значит надо при старте компьютера опять попасть в меню выбора загрузочного диска. Среди прочего там появится и Manjaro, нажимаем на него:
Если все пошло правильно, у вас появится новое загрузочное меню, где можно выбирать, в какой системе планируете работать
Первая загрузка будет дольше обычного, и сразу после загрузки дождитесь уведомления (справа внизу, около часов) о том, что вам надо обновить кое-что в вашей системе.
Важное отступление: Linux, в отличие других операционных систем, не представляет собой чего-то монолитного, а состоит из множества разных больших и маленьких программ, которые пишутся и обновляются всем миром. Большинство из них некоммерческие, поэтому никто никому ничего не обещает - ни стабильности, ни оперативности. Исходя из этого мы будем преследовать принцип "РАБОТАЕТ - НЕ ТРОГАЙ". Скорее всего, сегодня вы увидите менеджер пакетов в первый и последний раз, потому что все системные обновления для нас не важны в силу специфики наших задач.
Обновление будет выглядеть примерно так:
Смысла отказываться от чего-то нет, поэтому просто нажмите на зеленую кнопку внизу и от вас потребуют ввести ваш пароль, чтобы подтвердить что у вас есть права на внесения изменений в систему
Надо дождаться завершения.
После этого начинаем оптимизацию параметров под наше скромное железо. Нажимаем на кнопку "пуск" (назовем ее так) в левом нижнем углу, выберем настройки - диспетчер настроек. Откроется местная панель управления. На ней находим Manjaro Notifier Settings
В открывшемся окне снимаем все вот эти галочки:
Возвращаемся в диспетчер настроек, открываем "Сеансы и запуск", вкладка "автозапуск приложений". приводим к виду, как на картинке. Тут можно отключить и больше, но оставшееся не так критично влияет на быстродействие
Возвращаемся к диспетчеру настроек, открываем "установка и удаление программ". В ней слева вверху нажимаем на значок лупы, чтобы найти пакет "chromium", как на картинке
Самая первая - это браузер, аналог chrome, который нам понадобится в дальнейшем для работы Flutter. Нажимаем на зеленую кнопку рядом с нужным пакетом, появится панель внизу, на ней - кнопку "применить".
Я искренне считаю, что дизайн этого установщика пакетов должен победить в номинации "самая неудобная и нелогичная программа", хотя бы за вот эту вот кнопку "назад", которая находится слева вверху. Если Вы заблудитесь в этих трех кнопках - ничего страшного, у меня тоже не с первого раза все получилось.
Итак, он спросит у вас насчет интеграции chromium с возможностями Manjaro. Выбирать ничего не надо, нажимаем "выбрать" не выбирая
Далее вас предупредят, что вместе с браузером установится несколько мелких программ, от которых он зависит - соглашаемся
После завершения установки ставим браузер, с которым будем вести работу в дальнейшем. Это Midori
Midori - уникальный по своим качествам браузер. Его уникальность в том, что он, в отличие от остальных, просто показывает вам страницы в интернет, не сканируя при этом ваш жесткий диск и не отправляя тонну информации корпорациям, не дает возможностей удаленно управлять вашим компьютером или распознавать голос при выключенном микрофоне.
Нам, по-привычке, уже пофигу, что корпорации знают обо нас больше, чем мы сами, но только не в этом случае: сейчас это не позволяют ресурсы компьютера. В диспетчере настроек потом можно будет выбрать Midori браузером по умолчанию. На этом первичный тюнинг системы заканчиваем
P.S.: я midori нашел уже после того, как записал оставшуюся часть и обнаружил, что firefox жрет ресурсов больше, чем android studio, поэтому следующие кадры будут все еще с firefox, но midori справился бы с этим не хуже
4. Устанавливаем Flutter
Открываем в браузере сайт https://flutter.dev, нажимаем в правом верхнем углу Get Started
На следующем окне выбираем Linux
Далее вам покажут программы, которые должны у вас быть.
в Manjaro это все уже есть, поэтому просто пролистываем вниз до раздела Install Flutter manually (установка через snapd нам, опять же из-за ограниченности ресурсов, не подходит).
Нажимаем на синюю кнопку, чтобы скачать архив


Тем временем можем найти и скачать Android Studio. 
Открываем сайт, нажимаем на зеленую кнопку слева
Интересно, что разработчики Android Studio называют каждую новую версию в честь какого-нибудь живого существа. На текущий момент это Electric Eel - электрический угорь. Не так давно была версия, посвященная Arctic Fox (песец)
При нажатии на кнопку вам предложат внимательно пролистать лицензионное соглашение, поставить галочку и скачать архив с программой
Интересно, что в отличие от Windows и MacOS это не установщик, а просто архив с готовой к запуску программой, который надо лишь распаковать
После того, как все скачается, открываем Проводник (через меню на кнопке слева внизу), переходим в загрузки
Чтобы распаковать файл, нажимаем на него правой кнопкой мыши, выбираем пункт меню "извлечь сюда", откроется распаковщик
Если после распаковки в папке окажется что-то непонятное, нажмите на клавиатуре кнопку F5 чтобы обновить содержимое. Когда распакуете оба скачанных архива, перетащите их в свою домашнюю папку
Можно каждый раз запускать Android Studio открывая домашнюю папку, затем переходя в android-studio/bin и запуская файл studio.sh,а можно создать ярлык на рабочем столе
Для этого нажимаем на свободном месте рабочего стола правой кнопкой мыши, выбираем пункт меню "создать кнопку запуска". Откроется вот такое окно.
Первые две строки заполняем как хотим,
потом нажимаем на кнопку в поле "команда"
и находим studio.sh
Рабочий каталог можете просто скопировать полученную строку, и удалив из нее все, что правее android-studio.
Выбираем иконку...
В итоге у вас получится вот так:
Естественно, вместо слова eugene должен быть ваш логин.
5. Настройка Flutter, шаг 1
Открываем терминал (командную строку).
Для этого лучше всего в Проводнике перейти в свою домашнюю папку (куда мы скопировали папки flutter и android-studio), нажать правой кнопкой мыши на любом свободном месте и в появившемся меню найти терминал. 
Если он у вас откроется с полупрозрачным фоном, и вам это не нравится, сможете поменять настройки в меню "вид", я для контраста сделал фон черным.
Перед этим на странице сайта flutter.dev я рекомендую перейти по ссылке update path,
Итак, вводим команду nano .bashrc и у вас должен открыться консольный текстовый редактор с файлом настроек окружения вашего пользователя
Пролистываем его до самого низа
копируем строку с сайта и вставляем ее в редактор. Для этого убедитесь, что курсор находится в самом конце, вставляйте лучше через меню "правка".
После этого меняем текст, чтобы он содержал путь к папке (не перепутайте наклон косых черточек).
Должно получиться примерно так
После этого нажимаем на клавиатуре Ctrl-X, редактор спросит, хотим ли мы сохранить измененный буфер (как на скриншоте), нажимаем Y и потом Enter.
Следующим шагом надо упростить доступ flutter к браузеру (он будет использоваться для запуска ваших программ под web)
Для этого создадим символическую ссылку на уже установленный браузер chromium
В терминале сначала вводим команду which chromium чтобы убедиться, что он у нас есть и найти его местоположение
Затем выполняем команду sudo ln -s /usr/bin/chromium /usr/bin/google-chrome
Система спросит у вас пароль, подтверждающий полномочия на выполнение этой операции. Пароль при вводе отображаться НЕ будет, просто напишите его на клавиатуре и нажмите enter
Обращаю внимание, что команда sudo здесь - как раз и требует повышения прав пользователя до уровня суперпользователя, если написать просто ln -s /usr/bin/chromium /usr/bin/google-chrome то вам будет отказано в доступе. После этого закрываем терминал, это важно.
6. Первый запуск Android Studio
Если все сделали правильно, то при запуске программы через кнопки на рабочем столе вам сначала покажут заставку, потом начнется настройка и до-установка компонентов Android Studio. Этот процесс практически не отличается от установки на любой другой системе.
Сначала вас спросят, не хотите ли вы импортировать ранее сохраненные параметры.
Их у нас нет, поэтому просто идем дальше
Затем могу спросить, хотим ли мы посылать анонимную информацию разработчикам. Выбираем Do not send. Нажимаем Next
На следующем экране опять Next
Потом спросят, хотите темную или светлую тему. Для кратковременной работы врачи рекомендуют использовать темную, если же вы планируете зависать у экрана сутками напролет - то светлая будет более безопасна для глаз
Потом снова Next. На экране, где спросят о лицензиях на программные компоненты разработки, надо отметить справа внизу
Ждем завершения, нажимаем Finish и попадаем на стартовый экран Android Studio.
9. Настройка Flutter и Android Studio
Ходят мифы о том, будто бы Android Studio - очень прожорливая и тяжелая среда разработки. На самом деле это не так, и мы сейчас к этому придем.
Во-первых, давайте установим необходимые для работы плагины. Для этого на стартовом экране нажимаем соответствующую кнопку
Нам откроется маркетплейс, где мы в строке поиска пишем слово flutter и устанавливаем самый первый из найденных плагинов
Перед установкой вам скажут, что также надо будет установить плагин Dart - соглашайтесь. После установки вам прямо отсюда предложат перезапустить среду разработки, сделайте это
После этого у нас на стартовом экране программы появится кнопка для создания проектов на Flutter, но пока не нажимаем ее
Сейчас самое время сделать первичную инициализацию Flutter  с помощью команды flutter doctor в терминале.
Важный момент: ВАМ НАДО БЫЛО СНАЧАЛА ЗАКРЫТЬ ТЕРМИНАЛ, В КОТОРОМ ВЫ РЕДАКТИРОВАЛИ ФАЙЛ .bashrc И ОТКРЫТЬ НОВЫЙ
иначе система "не увидит" flutter, поскольку информация о месте его нахождения не была загружена (мы же лишь поменяли настройки, но не применили их)
Итак, открываем новое окно терминала (нажав правой кнопкой мыши в любом свободном месте и выбрав соответствующий пункт меню) и пишем там flutter doctor
Когда эта команда закончится, вы увидите, что надо завершить настройку Android Studio и Linux. Linux мы до-настраивать не будем, так как не собираемся запускать свои программы под ним, поэтом просто проигнорируем нижнее объемное предупреждение
Нам надо вернуться в Android Studio и продолжить с ней.
Пришла пора создать свой первый Flutter проект (кнопка New Flutter project).
Поскольку система еще не в курсе всех перемен, вручную слева еще раз нажмите на кнопку Flutter, а в строке сверху выберите нужную папку
Если все правильно - система просто ничего не скажет, нажимаем Next
На следующем экране нас ждут базовые настройки проекта
Самое сложное здесь поле - это Organization. По сути это адрес сайта вашей фирмы, записанный задом наперед. Почему самое сложное? Потому что изменить его, если потом передумаете, будет очень проблематично. Поэтому если будете делать приложение, которое планируется к публикации в магазинах приложений, этот момент надо продумать заранее.
В поле Project Location указана домашняя папка проекта. Знак ~ указывает на домашнюю папку пользователя. Слово StudioProjects можете заменить на любое свое, Android Stuido создаст нужную папку. Я, опять же, храню все рабочие проекты в папке \home\eugene\app, но не буду здесь навязывать свою точку зрения, это не принципиально.
После нажатия на кнопку Create запустится среда разработки. Первое время она будет недоступна, т.к. идет процесс индексирования проекта (индикатор в самом низу окна). Там же, слева внизу, будут выскакивать различные уведомления среды разработки.
После того, как индексирование закончится, нажмите No thanks чтобы не слать лишней информации о себе в интернет (любая телеметрия как минимум лишний раз нагружает ваш компьютер).
Чтобы закрыть панель с текстом Whats New in Electric Eel нажмите на кнопку Assistant сбоку.
Вообще, все кнопки по периметру окна открывают дополнительные панели, можете попробовать.
Если все прошло правильно, Android Studio откроет главный файл вашего проекта, с которого начинается запуск, и предложит включить форматирование Kotlin. Можете согласиться, на нас это не повлияет
Дальше открываем настройки Android Stuido (меню File - settings), переходим в System Settings, Android SDK, вкладка SDK Tools, ЖДЕМ пока загрузится и устанавливаем недостающие command-line tools
Дальше в этом же окне нас ждет пункт Plugins, где мы установим несколько полезных для нас вещей.
Для этого в маркетплейсе пишем Flutter и сортируем по популярности.
Нам нужны вот эти три - Flutter Pub version checker, Flutter Enhancement Suite и GetX
Затем нам надо отключить лишнее. Идем во вкладку Installed и отключаем то же, что и на следующих слайдах:
А также все, что связано с Google и Firebase
Далее отключаем тестирование с помощью Graddle
И некоторое возможности языка Flutter
Все!
Закрываем настройки и подключаем телефон к компьютеру проводом.
Если у вас iPhone - ничего не
выйдет, увы. К счастью, исходный код не меняется от выбора
целевого устройства, поэтому остается выбрать в качестве цели компиляции
Chrome.
Для нужд разработки подойдет любой Android-смартфон с версией Android не
ниже 5. Прежде чем его можно будет использовать, надо включить на нем
режим разработчика (проще погуглить, как это делается на конкретно вашем
телефоне) и в появившемся меню в настройках телефона "для
разработчиков" (опять же, на разных телефонах оно в разных местах,
придется поискать) разрешаем отладку через USB и установку через USB.
Если после этого вы подключили телефон к компьютеру проводом и на телефоне  высветилось "доверять этому компьютеру?" и код цифровой подписи - то все получилось.

Если нет - в первую очередь попробуйте другой USB кабель, т.к. есть кабели
пригодные только для зарядки, а вам нужен именно кабель для
синхронизации (DATA-кабель). Вторая причина, почему ваш телефон отказался показывать запрос о доверии компьютеру - неверный режим подключения телефона. Выберите передачу файлов (MTP) и все получится.
После того, как вы разрешили на телефоне устанавливать приложения с
компьютера, ваш телефон отобразится в списке целевых устройств.
Если все нормально, то при нажатии на зеленый треугольник наверху запустится компиляция, а внизу откроется окно вывода запущенной программы
Первый запуск программы на вашем телефоне с компьютера, на котором всего 4 Гб ОЗУ и медленный жесткий диск займет около 30 минут. Компьютер в это время лучше не трогать.
В дальнейшем время запуска значительно сократиться, и работать будет вполне комфортно.
Конечно, расширив оперативку хотя бы до 6 Гб или установив систему на SSD вы значительно сократите время компиляции и запуска, поэтому задумайтесь об апгрейде.
Subscription levels3

Внешний вид, интерфейс

$2.56 per month
Коллекции элементов интерфейса, готовые экраны и отдельные элементы

Сниппеты

$6.4 per month
Функциональные блоки кода, решающие определенные задачи. Включает доступ к материалам из подписки "внешний вид, интерфейсы"

Интегрированные экраны

$12.8 per month
Готовые к интеграции экраны с работающей логикой. Включает доступ к материалам из подписки "внешний вид, интерфейсы", "сниппеты"
Go up