Я починав як інтерфейсний веб-розробник, а потім став Flutter розробник. Я думаю, що були деякі концепції, які допомогли мені легше освоїти Flutter. Були також нові концепції, які відрізнялися.
У цій статті я хочу поділитися своїм досвідом і надихнути тих, хто відчуває себе паралізованим у виборі однієї екосистеми замість іншої, показуючи, як концепції передаються, і будь-які нові концепції можна засвоїти.
Поняття, які передаються
У цьому розділі показано місця, де зовнішня веб-розробка та Flutter схожі. Він пояснює навички, якими ви вже володієте, які стануть для вас перевагою, якщо ви запустите Flutter.
1. Реалізація інтерфейсів користувача (UI)
Щоб реалізувати заданий інтерфейс користувача у веб-інтерфейсі, ви створюєте елементи HTML і стилізуєте їх за допомогою CSS. Щоб реалізувати інтерфейси користувача у Flutter, ви створюєте текст віджети і стилізуйте їх властивості.
Як і CSS, Color клас у 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 допоміжний клас. The MediaQuery клас дає вам поточний пристрій orientation (пейзаж або портрет). Він також дає вам поточне вікно перегляду size, devicePixelRatio, серед іншої інформації про пристрій. Разом ці значення дають вам уявлення про конфігурацію мобільного пристрою. Ви можете використовувати їх, щоб змінити вигляд мобільного додатка на різних розмірах екрана.
3. Робота з налагоджувачами, редакторами та засобами командного рядка
Настільні браузери мають інструменти розробника. Ці інструменти включають інспектор, консоль, мережевий монітор тощо. Ці інструменти покращують процес веб-розробки. У Flutter теж є свої Інструменти розробника. Він має інспектор віджетів, налагоджувач, монітор мережі та інші функції.
Підтримка 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), Наприклад: Кутовий CLI, Створіть додаток React, Вигляд CLI, тощо. Flutter також поставляється з ексклюзивом CLI. Flutter CLI дозволяє будувати, створювати та розвивати проекти Angular. Він містить команди для аналізу та тестування проектів Flutter.
Концепції, які були новими
У цьому розділі розповідається про специфічні для Flutter концепції, які простіше або взагалі не існують у веб-розробці. Він пояснює ідеї, про які слід пам’ятати, коли ви входите у Flutter.
Як працювати з прокручуванням
Під час розробки для Інтернету поведінка прокручування за замовчуванням обробляється веб-браузерами. Тим не менш, ви можете налаштувати прокручування за допомогою CSS (за допомогою overflow).
У Flutter це не так. Групи віджетів не прокручуються за умовчанням. Коли ви відчуваєте, що групи віджетів можуть бути переповнені, вам потрібно заздалегідь налаштувати прокручування.
У Flutter ви налаштовуєте прокручування за допомогою особливих віджетів, які дозволяють прокручувати. Наприклад: ListView, SingleChildScrollView, CustomScrollViewтощо. Ці прокручувані віджети дають вам чудовий контроль над прокручуванням. с CustomScrollView, ви можете налаштувати експертні та складні механізми прокручування в програмі.
З боку Флаттера, використання ScrollViews є неминучим. Android та iOS мають ScrollView та UIScrollView для обробки прокручування. Flutter потрібен спосіб об’єднати візуалізацію та досвід розробника за допомогою його ScrollViewsтеж.
Це може допомогти перестати думати про потік структури документа та натомість розглядати програму як відкрите полотно для власних механізмів малювання пристрою.
2. Налаштування середовища розробки
Щоб створити найпростіший веб-сайт, ви можете створити файл із a .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 поставляється з flutter doctor команда. Ця команда повідомляє про стан ваших налаштувань розробки. Таким чином ви знаєте, над чим працювати в налаштуваннях, якщо буде потрібно.
Це не означає, що розвиток у Flutter відбувається повільно. Flutter поставляється з потужним двигуном. The flutter run команда дозволяє гаряче перезавантаження тестового пристрою під час кодування. Але тоді потрібно буде натиснути R для фактичного гарячого перезавантаження. Це не проблема. Розширення Flutter VS Code дозволяє автоматичне гаряче перезавантаження при зміні файлу.
3. Упаковка та розгортання
Розгортання веб-сайтів дешевше та простіше порівняно з розгортанням мобільних додатків. Коли ви розгортаєте веб-сайти, ви отримуєте доступ до них через доменні імена. Ці доменні імена зазвичай поновлюються щорічно. Однак вони необов'язкові.
Сьогодні багато платформ пропонують безкоштовний хостинг.
Наприклад: DigitalOcean надає вам безкоштовний субдомен на .ondigitalocean.com.
Ви можете використовувати ці домени, якщо створюєте веб-сайт із документацією. Ви також можете використовувати їх, коли вас не хвилює брендинг.
У світі мобільних додатків Flutter ви зазвичай розгортаєте свій додаток у двох місцях.
Ви повинні зареєструвати обліковий запис розробника на кожній із цих платформ. Реєстрація облікового запису розробника вимагає оплати або підписки та підтвердження особи.
Для App Store вам потрібно зареєструватися в програмі Apple Developer. Вам потрібно підтримувати річна підписка 99 дол. Для Google Play вам потрібно створити a одноразовий платіж у розмірі 25 доларів США за рахунок.
Ці магазини перевіряють кожну перевірену програму перед тим, як її запустити.
Також майте на увазі, що користувачам нелегко використовувати оновлення програми. Користувачі повинні явно оновлювати встановлені програми. Це на відміну від Інтернету, де кожен може просто побачити останню розгорнуту версію веб-сайту.
Управління розгорнутими програмами є відносно складнішим, ніж керування розгорнутими веб-сайтами. Однак це не повинно вас лякати. Зрештою, в обох магазинах розгорнуто мільйони програм, тому ви також можете додати свою.
Додаткові думки про флаттер
Flutter — це кросплатформний інструмент для створення настільних, мобільних або веб-додатків. Програми Flutter ідеальні для пікселів. Flutter малює той самий інтерфейс для кожної програми незалежно від цільової платформи. Це тому, що кожна програма Flutter містить механізм Flutter. Цей механізм рендерить код Flutter UI. Flutter надає полотно для кожного пристрою та дозволяє малювати так, як ви хочете. Двигун спілкується з цільовою платформою для обробки подій і взаємодій.
Флаттер ефективний. Він має високий рівень продуктивності. Це тому, що він створений за допомогою Dart і використовує функції Dart.
Завдяки численним перевагам Flutter є хорошим вибором для багатьох програм. Кросплатформні програми економлять гроші та час під час виробництва та обслуговування. Однак у деяких випадках Flutter (і кросплатформні рішення) може бути не оптимальним вибором.
Не використовуйте Flutter, якщо ви хочете, щоб користувачі використовували інструменти розробника платформи з вашою програмою. Інструменти розробника платформи тут означають інструменти для конкретного пристрою, такі як параметри розробника Android. Він також містить інструменти розробника браузера.
Не використовуйте Flutter для Інтернету, якщо очікуєте, що розширення браузера взаємодіятимуть із веб-сайтом.
Крім того, не використовуйте Flutter для сайтів із великим вмістом.
Висновок
Це був огляд навичок, які переходять від інтерфейсної веб-розробки до роботи з Flutter. Ми також обговорили концепції розробки додатків, які ви повинні вивчити як веб-розробник.
Flutter простіше для веб-розробників, оскільки вони обидва передбачають впровадження інтерфейсів користувача. Якщо ви запустите Flutter, ви побачите, що це дає вам хороший досвід розробника. Спробуйте Flutter! Використовуйте його для створення мобільних програм і, звичайно, демонструйте те, що ви створюєте.
Cheers!
