Разрабатываем первое мобильное приложение на Flutter от Google

В последнее время программированием интересуются всё больше пользователей. Наверняка и вас заинтересовала эта тема. Мы каждый день используем мобильные приложения гигантов рынка, и многих волнует вопрос — «Как же им удается создавать столь сложные программные продукты?» Предлагаем нашим читателям окунуться в мир разработки мобильных приложений и хотя бы в обших чертах понять, как проходит данный процесс.

Разрабатываем первое мобильное приложение на Flutter от Google. Flutter — фреймворк от Google. Фото.

Flutter — фреймворк от Google

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

iOS приложения разрабатывают с помощью Xcode на языке Swift, Android-приложения на Android Studio с использованием Java или Kotlin. Но есть более простой и удобный вариант — Flutter. Это SDK, разработанное компанией Google, которое позволяет компилировать приложение как под iOS, так и под Android автоматически. Таким образом, сделав приложение один раз, мы получим работающую версию как на iOS, так и на Android.

Первым делом необходимо зайти на официальный сайт Flutter и нажать на кнопку «Get Started» в правом верхнем углу. Далее откроется экран с выбором платформы, на которой вы вместе с нами прямо сейчас начнете разрабатывать мобильное приложение. Мы будем использовать Ubuntu и следовать инструкциям для этой системы.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

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

Если у вас Linux, открываем терминал. Создаем папку в системе командой:
mkdir flutter-first-app

Переходим в неё
cd flutter-first-app

Можно создать папку и перейти к ней автоматически командой
mkdir flutter-first-app & cd flutter-first-app

Далее по инструкции нам необходимо распаковать скачанный ранее архив tar.gz в данную папку командой:

tar xf ~/Downloads/flutter_linux_v1.12.13+hotfix.5-stable.tar.xz

Далее вбиваем в консоль вот эту команду:

export PATH="$PATH:`pwd`/flutter/bin"

Она нужна для того, чтобы мы могли обращаться к исполняемому файлу flutter командой «flutter» без указания путей.

Далее, следуя инструкции, запускаем команду:

flutter doctor

Она проанализирует наличие или отсутствие необходимых зависимостей (пакетов).

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

В данном случае нам необходимо установить Android SDK. Переходим по ссылке в предупреждении и попадаем на сайт Android Studio.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Вес пакета составляет 739 мегабайт, что уже довольно серьезно. Суммарно получается около 1.2 ГБ (Flutter + Android Studio).

Далее находим страницу с инструкцией по установке Android Studio. Так как мы используем 64-битную версию Linux, необходимо установить дополнительные пакеты.

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Теперь давайте распакуем наш «tar.gz»-файл Android Studio в /usr/local/ согласно инструкции той же командой, перед этим перейдя в папку /usr/local/:

sudo tar xf ~/Downloads/android-studio-ide-191.6010548-linux.tar.gz

Flutter Doctor в предупреждении предложил запустить после установки Android Studio, так как в дальнейшем произойдет установка дополнительных компонентов. Давайте так и сделаем.

Запустить Android Studio можно, перейдя к Android Studio/bin и запустив файл studio.sh:

./studio.sh

Откроется установщик Android Studio, который предложит установить еще компонентов на более чем 600 мегабайт.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

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

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Ради интереса можем создать новый проект. Нам предложат выбрать так называемый Activity.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Открылась наша среда разработки. Подождем пока завершатся процессы и закроем Android Studio.

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Теперь давайте вернемся к Flutter.

Запускаем flutter doctor и видим следующее:

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Нам предлагают исправить проблему с лицензиями командой:

flutter doctor --android-licenses

Запускаем команду и подтверждаем лицении, нажав «y».

Теперь создаем новый проект командой:

flutter create test_project

После создания проекта открываем текстовый редактор и переходим к папке. В качестве редактора я использую Visual Studio Code.

Теперь можно запустить наше первое приложение на Android-смартфоне. Для этого в настройках разработчика активируем отладку по USB, подключаем телефон к ПК. Чтобы проверить, видит ли flutter наш телефон, запускаем команду:

flutter devices

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Телефон успешно распознался. Теперь можно запустить наше приложение командой:

flutter run

Разрабатываем первое мобильное приложение на Flutter от Google. Фото.

Итак, мы запустили наше первое демо-приложение. Делитесь в комментариях вашим мнением.

Читайте также: Huawei рассказала, для каких сервисов Google у неё есть замена

Если вам материал понравился, мы продолжим серию подобных статей и в следующей части разработаем полноценное приложение, которое будет получать данные (например, статьи AndroidInsider.ru) по API и выводить их на экран.

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

Теги
Лонгриды для вас
Правда ли, что живые обои разряжают смартфон

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

Читать далее
AirTag
Apple подставила пользователей Android, сделав AirTag. Но защититься от слежки можно

Не знаю, как у вас, но у меня всегда складывалось впечатление, что в Apple считают пользователей Android людьми второго сорта. Не то из-за более низкой цены их смартфонов, не то из-за того, что Google Play не дотягивает до уровня App Store, не то из-за менее стабильной поддержки. Так или иначе, но в Купертино никогда особенно не рассматривали рынок Андроид-устройств как сколь-нибудь перспективный. В результате Apple Music стал первым и последним сервисом Apple, который вышел для этой платформы. А уж AirTag и вовсе стал устройством, будто бы намеренно выпущенным для того, чтобы насолить пользователям Android.

Читать далее
Правда ли, что приложение ВКонтакте удалили из Google Play

26 сентября по непонятной причине Apple удалила из фирменного магазина приложений App Store программы VK. Обосновать это санкциями нельзя, так как непосредственно на VK их никто не накладывал. Пока что из Google Play все приложения, в том числе клиент социальной сети ВКонтакте, никуда не делся. Но сомнений, что через какое-то время это произойдет, нет совершенно никаких. Благо, что у смартфонов на Андроиде перед Айфонами есть одно очень важное преимущество.

Читать далее
2 комментария
  1. KoNeko

    Что-то не понятно — откуда взялось приложение? Создали тестовый проект, запустили редактор, ничего там не вводили, и сразу запустили приложение?

    • Олег Кусов

      Да, при создании проекта создаётся шаблонный код.

Новый комментарий