Последнее обновление:

Создание и развертывание веб-приложения с помощью Flutter

Flutter

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

Что ж, теперь это возможно с фреймворком Flutter. Теперь вы можете легко развернуть свое приложение в сети всего за несколько простых шагов с помощью Flutter Framework, который позаботится обо всех скучных преобразованиях из кода Dart в HTML/JS .

И если до этого у вас было приложение только для Android и IOS, то, после прочтения этой статьи, будет еще и для Интернета. Сегодня научимся развертывать свое веб-приложение на страницах GitHub.


Подготовка

Давайте настроим нашу систему, чтобы создать флаттер-проект с веб-поддержкой.

Нам потребуется:

  1. SDK Flutter . Ссылка для установки: https://flutter.dev/docs/get-started/install
  2. Браузер Google Chrome для тестирования и отладки веб-приложения
  3. IDE, поддерживающая Flutter. Мои рекомендации - Android Studio, Visual Studio Code . Посмотрите эту ссылку для IDE: https://flutter.dev/docs/get-started/editor

Я буду использовать Android Studio в качестве IDE, но принципиальной разницы нет. Вы можете выбрать Visual Studio Code, это лишь дело вкуса.

Создание нового проекта Flutter с веб-поддержкой

1. Откройте Android Studio и создайте новый проект Flutter следующим образом:

новый проект
Нажмите, чтобы начать новый проект Flutter
Приложение Flutter
Приложение Flutter
Название приложения
Дайте приложению название по своему выбору

2. Теперь откройте окно терминала в Android Studio и напишите одну за другой следующие команды:

flutter channel beta 
flutter upgrade 
flutter config --enable-web
Терминал
Окно терминала в Android Studio

Дождитесь завершения процесса и настройки Dart SDK . В конце терминал будет выглядеть примерно так:

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

flutter devices

Flutter будет отображать Chrome как устройство, на котором вы можете отлаживать свое приложение.

Итак, мы успешно настроили свой SDK. Теперь просто перезапустите IDE (Android Studio), чтобы продолжить работу. После перезапуска просто введите следующую команду, чтобы запустить демонстрационное приложение от команды Flutter в Chrome.

flutter run -d chrome

После завершения команды ваше первое веб-приложение Flutter откроется для отладки в браузере:

приложение в Chrome
Вид демо приложения в Хроме

Здорово, правда? Вы только что запустили IDE, а ваше приложение уже работает в браузере!

Теперь давайте создадим релизную сборку приложения, она нам понадобится для размещения в интернете.

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

flutter create .
включение web файлов в проект
Результат команды flutter create .
flutter build web --release
релиз приложения

После этого в вашем проекте появится папка build/web. Эта папка содержит все файлы, которые вам нужно будет загрузить на хостинг (в нашем случае это будет репозиторий GitHub).

Развертывание приложения на страницах Github

Сначала откройте свою учетную запись Github и создайте новый репозиторий с любым именем. Обязательно сохраните ссылку которую вам предоставит GitHub.

создание нового репозитория
Ваша ссылка на новый репозиторий

Откройте терминал и перейдите в папку build/web с помощью следующих команд, выполняя их одну за другой:

cd ./build/web
git init
git remote add origin <Ваша HTTPS/SSH ссылка на новый репозиторий>
git add .
git commit -m "Created Flutter Web App"
git push origin master

После этого веб-сборка вашего проекта Flutter будет загружена в ваш репозиторий на Github.

Теперь нам просто нужно изменить некоторые настройки репозитория Github для развертывания веб-приложения.

  1. Зайдите в Настройки репозитория
  2. Прокрутите вниз до Страниц GitHub
  3. Щелкните раскрывающийся список источников и выберите там ветку Master.
выбор ветки master
Выбор ветки Master

Поздравляю! Вы успешно развернули свое веб-приложение Fluter в Интернете. Ссылка на него будет следующей:

https://<Ваш User id>.github.io/<Имя репозитория>

Если при открытии веб-сайта возникла проблема, попробуйте включить index.html в конец ссылки: https://<Ваш User id>.github.io/<Имя репозитория>/index.html

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

WEB поддержка Flutter пока нестабильна и находится в beta-версии.
Следовательно, вы можете столкнуться с некоторыми проблемами при использовании отдельных плагинов в своем проекте.

Комментарии