Если вы прочитали статью Флаттер: почему стоит делать ставку на эту технологию, значит, у вас уже есть повод начать изучать флаттер, в этой статье я расскажу, как вы начнете свою карьеру с флаттером. паутина.
Настройка среды
Чтобы вы начали трепетать, первым делом нужно установить нашего приятеля. Flutter доступен для трех самых популярных платформ: Windows, MacOS и Linux. Flutter очень прост в установке, просто следуйте руководству, которое доступно здесь.
Необходимые ресурсы:
Необходимые ресурсы VSCode:
Убедитесь, что вы используете версию ≥ 3.0.1 расширения Flutter.
После загрузки и установки flutter не готов к разработке для Интернета со стабильной версией, поэтому мы обновим его, чтобы получить последнюю версию, включающую инструменты, необходимые для разработки в Интернете. Откройте терминал и введите:
flutter upgrade
Хорошо, теперь мы готовы разрабатывать как мобильную, так и веб-версию.
Создание проекта
Откройте код Visual Studio, затем «Просмотр» - ›Палитра команд (Cntrl + Shift + P или Command + Shift + P) и введите:
Flutter: New Web Project
Я создал проект с таким же названием «hello_world», вы можете дать то имя, которое вам больше нравится. Подождите, пока флаттер загрузит все политики и пакеты, необходимые для создания проекта, этот процесс может измениться в первый раз.
После выполнения команды у вас будет базовый проект, из которого мы будем кодировать. Исходный проект имеет следующий файловый каркас:
Используйте команду ниже, чтобы включить веб-модуль для флаттера.
flutter packages pub global activate webdev
Наконец-то мы можем почувствовать небольшую дрожь в Интернете. Вы можете запустить приложение с помощью F5 или команды
flutter packages pub global run webdev serve
Откройте файл main.dart и удалите все.
Теперь вставьте следующий код в файл main.dart.
Запустите код и результат будет следующим:
Пойдем к делу
Теперь создайте новый файл в папке lib с именем todo.dart.
После изменения файла main.dart на приведенный ниже код
Теперь давайте запустим код, нажмите F5, чтобы увидеть результат. Если вы следуете руководству, чтобы поцарапать, результат будет таким, как на видео ниже.
Обратите внимание, что наш значок ошибочен, и мы исправим эту проблему сейчас. В вашем vscode найдите веб-папку и создайте папку под названием assets
Внутри папки с ресурсами создайте файл с именем FontManifest.json.
После создания вставьте в файл приведенный ниже json и снова запустите проект.
Вот и все, у нас есть приложение, созданное с помощью web flutter, которое можно легко использовать и быстро создавать. Скоро я запущу еще несколько дополнительных руководств по созданию реальных веб-приложений для рынка.
Заключение автора
Что ж, я уже очень сильно фанат Flutter, и теперь, благодаря этой эволюции Flutter for Web, мне он нравится еще больше.
После того, как вы создадите веб-приложения, представленные в учебнике, у них возникнет то же чувство, что и у меня: «НО ЧТО ТАКОЕ выглядит на Android, этот сумасшедший!».
Я много смеялся в то время, я набирал текст и дважды щелкнул поле и хром !, хром отображает некоторые параметры Android. Если вы не собираетесь работать с Flutter, посмотрите, это весело.
Другое дело - использовать Dart, чтобы нянчиться, это один из языков, которым я когда-либо учил больше всего. Создавать списки, итерацию, объектную ориентацию очень просто. На самом деле программирование на Dart - это чистое развлечение, и это по-прежнему полноценный язык программирования.
Я пока не рекомендую использовать Flutter в производственной среде, дождитесь выхода стабильной версии Flutter с учетом веб-версии.
Проект To Do доступен в моем github, если вам нужно просто перейти здесь.
