Веб-программирование

Как настроить Flutter и создать веб-приложение Hello World в Linux

Как настроить Flutter и создать веб-приложение Hello World в Linux
Flutter - это фреймворк для разработки приложений, который можно использовать для разработки кроссплатформенных приложений, работающих на нативном коде после компиляции или сборки. Flutter, разработанный Google, позволяет создавать быстрые прототипы за короткое время, а также позволяет создавать полноценные приложения, использующие API-интерфейсы для конкретных платформ. Используя Flutter, вы можете создавать красивые приложения для мобильных устройств, настольных операционных систем и веб-браузеров, используя официальные виджеты материального дизайна. В этой статье пойдет речь об установке Flutter и создании нового проекта для разработки веб-приложения. Flutter использует «Dart» в качестве основного языка программирования для написания приложений.

Установите Flutter в Linux

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

$ sudo snap install flutter --classic

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

$ sudo apt install git
$ git clone https: // github.com / flutter / flutter.git -b стабильный --depth 1 --no-single-branch

Обратите внимание, что выполнение указанной выше команды предоставит вам необходимые файлы из официального репозитория Flutter, включая исполняемые двоичные файлы. Вы сможете выполнять эти двоичные файлы из папки «bin». Однако эти исполняемые файлы не будут добавлены в общесистемную переменную PATH, и вы не сможете запускать их из любого места, если вручную не добавите их в переменную PATH. Для этого выполните следующие действия.

Открыть ".bashrc », расположенный в вашей домашней папке, с помощью вашего любимого текстового редактора:

$ nano «$ HOME /.bashrc »

Добавьте следующую строку внизу файла, аккуратно заменив нить.

экспорт ПУТЬ = "$ ПУТЬ:/ flutter / bin "

Например, если вы скачали репозиторий Flutter в папке «Загрузки», вам нужно будет добавить следующую строку:

export PATH = "$ PATH: $ HOME / Downloads / flutter / bin"

Сохраните файл, когда закончите. Обновить ".bashrc », выполнив следующую команду:

$ source «$ HOME /.bashrc »

Чтобы убедиться, что папка «bin» Flutter была добавлена ​​в путь, выполните следующую команду:

$ echo $ PATH

Вы должны получить примерно такой результат:

/ usr / local / sbin: / usr / local / bin: / usr / sbin: / usr / bin: / sbin: / bin: / usr / games: / usr / local / games: / snap / bin: / home / nit / Downloads / flutter / bin

Обратите внимание на наличие ключевого слова «flutter» и полный путь, который показывает папку «bin» в каталоге «flutter».

Чтобы проверить, можно ли запустить команду «flutter» с любого пути, используйте команду ниже:

$ которые трепещут

Вы должны получить примерно такой результат:

/ home / nit / Downloads / flutter / bin / flutter

Обратите внимание, что язык «Dart», необходимый для написания приложений Flutter, поставляется в комплекте с файлами Flutter, загруженными из репозитория git или из пакета snap. Выполните следующую команду, чтобы проверить недостающие зависимости, необходимые для запуска Flutter:

$ флаттер доктор

Некоторые необходимые файлы могут начать загрузку, чтобы завершить настройку Flutter. Если вы еще не установили Android SDK, на выходе будет показано сообщение, которое поможет вам выполнить установку.

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

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

$ flutter channel beta
$ флаттер апгрейд
Конфигурация $ flutter --enable-web

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

устройства $ flutter

Вы должны получить примерно такой результат:

2 подключенных устройства:
Веб-сервер (веб) • веб-сервер • веб-javascript • Инструменты Flutter
Chrome (Интернет) • Chrome • Web-javascript • Google Chrome 87.0.4280.66

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

Создать новый проект Flutter

Чтобы создать новый проект веб-приложения «HelloWorld» с помощью Flutter, выполните команды, указанные ниже:

$ flutter создать helloworld
$ cd helloworld

Чтобы протестировать только что созданный проект, выполните команду:

$ flutter run -d хром

Вы должны увидеть демонстрацию веб-приложения Flutter, подобную этой:

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

Измените свой проект

Демо-проект, который вы создали выше, содержит «основной.dart », расположенный в папке« lib ». Код, содержащийся в этом «основном.dart »очень хорошо комментируется и довольно легко понимается. Я бы посоветовал вам хотя бы раз просмотреть код, чтобы понять базовую структуру приложения Flutter.

Flutter поддерживает «горячую перезагрузку», что позволяет быстро обновлять приложение без перезапуска, чтобы увидеть изменения. Попробуйте изменить название приложения с «Домашняя страница демонстрации Flutter» на «Hello World» !!" в основном.дротик »файл. Когда закончите, нажмите нажмите в терминале, чтобы обновить состояние приложения без его перезапуска.

Создайте свое приложение Flutter

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

$ flutter build web

После завершения процесса сборки у вас должна появиться новая папка в каталоге вашего проекта, расположенная по пути «build / web». Здесь вы найдете все необходимое.html »,«.js »и«.css », необходимые для обслуживания проекта в Интернете. Вы также найдете различные файлы ресурсов, используемые в проекте.

Полезные ресурсы

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

Заключение

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

Обзор беспроводной мыши Microsoft Sculpt Touch
Я недавно прочитал о Microsoft Sculpt Touch беспроводная мышь и решил ее купить. Побывав некоторое время, я решил поделиться своим опытом с ним. Эта б...
Экранный трекпад и указатель мыши AppyMouse для планшетов с Windows
Пользователи планшетов часто пропускают указатель мыши, особенно когда они привыкли пользоваться ноутбуками. Смартфоны и планшеты с сенсорным экраном ...
Средняя кнопка мыши не работает в Windows 10
В средняя кнопка мыши помогает пролистывать длинные веб-страницы и экраны с большим объемом данных. Если это прекратится, вы в конечном итоге будете и...