Я начинал как фронтенд-веб-разработчик, а затем стал Flutter разработчик. Я думаю, что были некоторые концепции, которые помогли мне легче освоить Flutter. Были также некоторые новые концепции, которые отличались друг от друга.
В этой статье я хочу поделиться своим опытом и вдохновить любого, кто чувствует себя парализованным, выбирая одну экосистему вместо другой, показав, как концепции передаются и какие новые концепции можно изучить.
Концепции, которые были перенесены
В этом разделе показаны места, в которых интерфейсная веб-разработка и Flutter похожи. В нем объясняются навыки, которые у вас уже есть, и которые принесут вам преимущество, если вы запустите Flutter.
1. Реализация пользовательских интерфейсов (UI)
Чтобы реализовать данный пользовательский интерфейс во внешнем веб-интерфейсе, вы создаете элементы HTML и стилизуете их с помощью CSS. Чтобы реализовать пользовательские интерфейсы во Flutter, вы составляете виджеты и стиль их с свойства.
Как и CSS, Color class в Dart работает с «rgba» и «hex». Также как и CSS, Flutter использует пиксели для единиц пространства и размера.
Во Flutter у нас есть классы Dart и перечисления почти для всех свойств CSS и их значений. Например:
У флаттера тоже есть Column и Row виджеты. Это эквивалент Flutter для display: flex в CSS. Чтобы настроить justify-content и align-items стили, которые вы используете MainAxisAlignment и CrossAxisAlignment характеристики. Чтобы настроить flex-grow стиль, оберните затронутые дочерние (детские) виджеты Column/Row, в Expanded or Flexible.
Для расширенных пользовательских интерфейсов Flutter имеет CustomPaint класс – это Flutter, что Canvas API относится к веб-разработке. CustomPaint дает вам художник для рисования любого пользовательского интерфейса, как вы хотите. Вы обычно будете использовать CustomPaint когда вы хотите что-то действительно сложное. Также, CustomPaint это способ, когда комбинация виджетов не работает.
2. Разработка для нескольких Разрешения экрана
Веб-сайты работают в браузерах, а мобильные приложения — на устройствах. Таким образом, при разработке для любой платформы вы должны помнить о платформе. Каждая платформа реализует одни и те же функции (камера, местоположение, уведомления и т. д.) по-разному.
Как веб-разработчик, вы думаете об отзывчивости вашего веб-сайта. Вы используете медиа-запросы для обработки того, как ваш сайт выглядит на небольших и широких экранах.
Переходя от мобильной веб-разработки к Flutter, у вас есть MediaQuery вспомогательный класс. MediaQuery класс дает вам текущее устройство orientation (пейзаж или портрет). Это также дает вам текущий видовой экран size, devicePixelRatio, среди другой информации об устройстве. Вместе эти значения дают представление о конфигурации мобильного устройства. Вы можете использовать их, чтобы изменить внешний вид вашего мобильного приложения на разных размерах экрана.
3. Работа с отладчиками, редакторами и инструментами командной строки
Настольные браузеры имеют инструменты разработчика. Эти инструменты включают в себя инспектор, консоль, сетевой монитор и т. д. Эти инструменты улучшают процесс веб-разработки. У флаттера тоже есть свой DevTools. Он имеет свой инспектор виджетов, отладчик, сетевой монитор и другие функции.
Поддержка IDE также аналогична. Visual Studio Code — одна из самых популярных IDE для веб-разработки. Существует множество веб-расширений для VS Code. Flutter также поддерживает VS Code. Поэтому при переходе вам не нужно менять IDE. Существуют расширения Dart и Flutter для VS Code. Flutter также хорошо работает с Android Studio. И Android Studio, и VS Code поддерживают Flutter DevTools. Эти интеграции с IDE дополняют инструменты Flutter.
Большинство интерфейсных JavaScript-фреймворков поставляются со своими интерфейс командной строки (CLI). Например: Угловой интерфейс командной строки, Создать приложение React, Просмотр CLIи т. д. Flutter также поставляется с эксклюзивным CLI. Flutter CLI позволяет создавать, создавать и разрабатывать проекты Angular. В нем есть команды для анализа и тестирования проектов Flutter.
Концепции, которые были новыми
В этом разделе рассказывается о концепциях, специфичных для Flutter, которые проще или отсутствуют в веб-разработке. В нем объясняются идеи, которые вы должны иметь в виду при входе во Flutter.
Как справиться с прокруткой
При разработке для Интернета поведение прокрутки по умолчанию обрабатывается веб-браузерами. Тем не менее, вы можете настроить прокрутку с помощью CSS (используя overflow).
Во флаттере такого нет. Группы виджетов по умолчанию не прокручиваются. Когда вы чувствуете, что группы виджетов могут переполниться, вам необходимо заранее настроить прокрутку.
Во Flutter вы настраиваете прокрутку, используя специальные виджеты, которые разрешают прокрутку. Например: ListView, SingleChildScrollView, CustomScrollViewи т. д. Эти виджеты с возможностью прокрутки дают вам отличный контроль над прокруткой. С CustomScrollView, вы можете настроить экспертные и сложные механизмы прокрутки в приложении.
На стороне Флаттера, используя ScrollViews неизбежно. Android и iOS имеют ScrollView и UIScrollView для обработки прокрутки. Flutter нужен способ унифицировать рендеринг и опыт разработчиков, используя его ScrollViews, слишком.
Это может помочь перестать думать о потоке структуры документа и вместо этого рассматривать приложение как открытый холст для собственных механизмов рисования устройства.
2. Настройка среды разработки
Для создания простейшего веб-сайта можно создать файл с .html расширение и откройте его в браузере. Флаттер не так прост. Чтобы использовать Flutter, вам необходимо установить Flutter SDK. и настроили Flutter для тестового устройства. Итак, если вы хотите закодировать Flutter для Android, вам нужно настроить Android SDK. Вам также потребуется настроить как минимум одно устройство Android (эмулятор Android или физическое устройство).
То же самое относится и к устройствам Apple (iOS и macOS). После установки Flutter на Mac вам все равно нужно настроить Xcode, прежде чем идти дальше. Вам также понадобится как минимум симулятор iOS или iPhone для тестирования Flutter на iOS. Flutter для рабочего стола также является значительной настройкой. В Windows вам необходимо настроить Windows Development SDK с помощью Visual Studio (не VS Code). В Linux вы установите больше пакетов.
Без дополнительной настройки Flutter работает в браузерах. В результате вы можете пропустить дополнительную настройку для целевых устройств. В большинстве случаев вы будете использовать Flutter для разработки мобильных приложений. Следовательно, вы хотели бы настроить по крайней мере Android или iOS. Флаттер поставляется с flutter doctor команда. Эта команда сообщает о состоянии вашей установки разработки. Таким образом, вы знаете, над чем работать при настройке, если это необходимо.
Это не означает, что разработка во Flutter идет медленно. Flutter поставляется с мощным двигателем. flutter run Команда разрешает горячую перезагрузку тестового устройства во время кодирования. Но тогда вам нужно будет нажать R на самом деле горячая перезагрузка. Это не проблема. Расширение VS Code для Flutter разрешает автоматическую горячую перезагрузку при изменении файла.
3. Упаковка и развертывание
Развертывание веб-сайтов дешевле и проще по сравнению с развертыванием мобильных приложений. Когда вы развертываете веб-сайты, вы получаете к ним доступ через доменные имена. Эти доменные имена обычно продлеваются ежегодно. Однако они являются необязательными.
Сегодня многие платформы предлагают бесплатный хостинг.
Например: DigitalOcean дает вам бесплатный субдомен на .ondigitalocean.com.
Вы можете использовать эти домены, если вы создаете веб-сайт документации. Вы также можете использовать их, когда не беспокоитесь о брендинге.
В мире мобильных приложений Flutter вы обычно в большинстве случаев развертываете свое приложение в двух местах.
Вы должны зарегистрировать учетную запись разработчика на каждой из этих платформ. Для регистрации учетной записи разработчика требуется плата или подписка и проверка личности.
Для App Store вам необходимо зарегистрироваться в программе Apple Developer. Вам нужно поддерживать годовая подписка $99. Для Google Play необходимо создать единоразовый платеж в размере 25 долларов США для счета.
Эти магазины проверяют каждое рассмотренное приложение перед его запуском.
Также имейте в виду, что пользователям нелегко потреблять обновления приложений. Пользователи должны явно обновлять установленные приложения. Это отличается от Интернета, где каждый может увидеть последнюю развернутую версию веб-сайта.
Управление развернутыми приложениями требует больше усилий, чем управление развернутыми веб-сайтами. Однако это не должно вас пугать. В конце концов, в обоих магазинах развернуты миллионы приложений, так что вы тоже можете добавить свое.
Дополнительные мысли о флаттере
Flutter — это кроссплатформенный инструмент для создания настольных, мобильных или веб-приложений. Приложения Flutter идеально подходят для пикселей. Flutter рисует один и тот же пользовательский интерфейс в каждом приложении независимо от целевой платформы. Это связано с тем, что каждое приложение Flutter содержит движок Flutter. Этот движок отображает код пользовательского интерфейса Flutter. Flutter предоставляет холст для каждого устройства и позволяет рисовать так, как вы хотите. Механизм взаимодействует с целевой платформой для обработки событий и взаимодействий.
Флаттер эффективен. Он имеет высокий уровень производительности. Это связано с тем, что он создан с помощью Dart и использует возможности Dart.
Благодаря этим многочисленным преимуществам Flutter является хорошим выбором для многих приложений. Кроссплатформенные приложения экономят деньги и время при производстве и обслуживании. Однако в некоторых случаях Flutter (и кроссплатформенные решения) может быть не оптимальным выбором.
Не используйте Flutter, если вы хотите, чтобы пользователи использовали инструменты разработчика платформы с вашим приложением. Инструменты разработчика платформы здесь означают инструменты для конкретных устройств, такие как параметры разработчика Android. Он также включает инструменты разработчика браузера.
Не используйте Flutter для Интернета, если вы ожидаете, что расширения браузера будут взаимодействовать с веб-сайтом.
Кроме того, не используйте Flutter для веб-сайтов с большим количеством контента.
Заключение
Это был обзор навыков, которые переносятся из веб-разработки переднего плана в работу с Flutter. Мы также обсудили концепции разработки приложений, которые вы должны изучить как веб-разработчик.
Flutter проще для веб-разработчиков, потому что оба они связаны с реализацией пользовательского интерфейса. Если вы запустите Flutter, вы обнаружите, что он дает вам хороший опыт разработчика. Попробуйте Флаттер! Используйте его для создания мобильных приложений и, конечно же, для демонстрации того, что вы создаете.
Ура!
