ВСТАНОВЛЕННЯ, НАЛАШТУВАННЯ І ПЕРШИЙ ДОДАТОК

Як почати роботу з Flutter

Як почати роботу з Flutter

КОРОТКА ІНСТРУКЦІЯ

Як почати роботу з Flutter КОРОТКА ІНСТРУКЦІЯ

Flutter – це кросплатформний фреймворк з відкритим вихідним кодом від Google, що працює на базі мови Dart. Він дозволяє створювати потужні програми під різні операційні системи, які мало чим поступаються нативним проєктам.

Незважаючи на «молодість» Flutter, він був випущений у 2017 році, на ньому вже працюють великі проєкти зі світовими іменами. Ось кілька із них:

  • Google Ads
  • Ebay
  • Alibaba
  • Cryptomaniac
  • Square

У цій статті ми розповімо, як почати працювати з SDK Flutter, і допоможемо вам написати перший мобільний додаток.

Як почати роботу з Flutter — установка, налаштування та перший додаток

Встановлення та налаштування Flutter

Flutter projects

Встановлення та налаштування Flutter Flutter projects

Завантажити актуальну версію Flutter SDK можна на офіційному сайті фреймворку. Там же представлена ​​докладна інструкція щодо встановлення на різні операційні системи: Windows, macOS, Linux, Chrome OS.

Зокрема, для початку роботи потрібно:

  1. Завантажити інсталяційний пакет на пристрій.
  2. Розпакувати ZIP-архів та вибрати місце встановлення.
    Примітка: Flutter не рекомендується встановлювати в директорію C: Program Files, оскільки вона вимагає підвищених прав.
  3. Запустити flutter doctor – команду, яка перевірить правильність встановлення інструменту.
  4. Встановити відсутні компоненти, якщо це необхідно.
  5. Налаштувати IDE.
  6. Протестувати роботу Flutter.

У результаті ви отримаєте: готовий до роботи фреймворк Flutter, редактор вихідного коду VS Code та Android Studio. Для складання проєкту на iOS доведеться також встановити macOS з Xcode, які є у вільному доступі.

Важливо: для розробки Flutter можна використовувати різні редактори. За замовчуванням, основним для фреймворку є VSCode, але нам здається, що Intellij IDEA буде трохи зручнішим. Надалі ви зможете вибрати із цих двох, або будь-який інший, проте для створення першого проєкту використовуватимемо «рідний» VSCode.

Після написання коду, мобільний додаток потрібно відразу запустити та протестувати. Для цього нам знадобляться:

  • Реальний пристрій Android або iOS, підключений до комп’ютера та переведений у режим розробника.
  • iOS Simulator — для запуску IOS-програм на комп’ютері, за відсутності фізичного пристрою.
  • Емулятор Android — для запуску програм Android.
  • Google Chrome – браузер для налагодження.

Коли все готове та налаштоване, можна переходити до найцікавішого – до створення програми.

Як почати роботу з Flutter — установка, налаштування та перший додаток

Інструкція: як запустити свій перший проєкт на Flutter

Flutter projects

Інструкція: як запустити свій перший проєкт на Flutter Flutter projects

Запустіть VS Code із встановленим розширенням Flutter, а потім відкрийте командний рядок. Це можна зробити декількома способами:

  1. Перейдіть по шляху Вигляд → Палітра команд.
  2. У macOS: натисніть клавіші Command-Shift-P.
  3. Windows або Linux: натисніть клавіші Control-Shift-P.

Потім введіть у командний рядок текст: Flutter: New Application Project та натисніть Return.

Виберіть папку для збереження проєкту та вигадайте його назву. Наприклад, назвемо додаток new_flutter_project. Протягом кількох секунд Flutter налаштує проект у VS Code, після чого у редакторі відкриється вкладка під назвою main.dart.

 

Розберемо структуру інтерфейсу.

У центральній частині VS Code знаходиться редактор вихідного коду, в якому відбуватиметься основна частина роботи. Зліва розташована панель, в якій відображається структура всього проекту. Папки Android, iOS та Web містять набір файлів, необхідних для розгортання проєкту на кожній із цих платформ. У папці lib містить документ main.dart і код, який можна застосувати до обох платформ.

Папка Test потрібна для тестування проєкту. Це важливий етап у розробці будь-якого додатка, але, в рамках цього посібника, ми не зачіпатимемо цю тему. Тому при бажанні цю папку можна видалити.

Працюємо з кодом

Flutter projects

Працюємо з кодом Flutter projects

Замініть код на main.dart на цей:

Для того, щоб зміни набули чинності, їх потрібно зберегти. Для цього виконайте команду: Файл → Зберегти. Також можна натиснути клавіші Command+S — для mac OS, або Control+S для Windows або Linux.

У цьому коді для запуску програми main ми використовуємо => — оператор для однорядкової функції.

Більшість об’єктів у Flutter-додатку – це віджети, які знаходяться або не знаходяться в якомусь стані. У нашому випадку, додаток, що вийшов, являє собою звичайний віджет без збереження стану.

Запустимо свій проєкт. Для цього в нижньому правому куті клацніть на вибрану платформу, після чого відкриється список всіх доступних платформ, на яких програма може бути запущена. У нас це:

  • iOS Simulator;
  • емулятор Android;
  • браузер Google Chrome.

Наприклад, виберемо Android. Дочекавшись запуску емулятора, потрібно виконати складання та запуск проекту. Для цього потрібно натиснути F5, або виконати команду Налагодження → Почати налагодження. Після цього відкриється консоль налагодження та почнеться складання програми.

У верхньому правому куті з’явиться червоний банер з написом DEBUG. Він говорить про те, що програма працює в режимі налагодження.

Щоб зупинити програму, потрібно натиснути кнопку у формі червоного квадрата, розташовану у верхній частині інтерфейсу.

Щоб повернутися до Project Explorer, на панелі інструментів VS Code виберіть: View → Explorer.

Підсумок

AVADA-MEDIA

Підсумок AVADA-MEDIA

Вітаємо, сьогодні ви створили свій перший додаток на фреймворку Flutter. У наступних статтях ми заглибимося в тему, і розповімо, як створювати різні віджети, використовувати HOT Reload – гаряче перезавантаження, імпортувати пакети даних та піднімемо інші важливі теми.

Якщо ви хочете почати вивчати Flutter, запрошуємо на безкоштовні курси в AVADA MEDIA. Тут на вас чекають конструктивні відеоуроки, практика на реальних проектах та підтримка діючої команди розробки. Найкращі студенти будуть запрошені на роботу в нашій компанії.

Останні роботи

Створюємо дивовижні проєкти

Останні роботи

Кращим підтвердженням нашої кваліфікації та професіоналізму є історії успіху наших клієнтів і відмінності в їх бізнесі до і після співпраці з нами.

Наші клієнти

Що про нас кажуть

Наші клієнти Що про нас кажуть

Успішні проєкти створюються тільки командою

Наша команда

Успішні проєкти
створюються тільки командою Наша команда

(Ru) Photo 11
(Ru) Photo 10
Photo 9
Photo 8
Photo 7
Photo 6
Photo 5
Photo 4
Photo 3
Photo 2
Photo 1
(Ru) Photo 12

Зв'яжіться з експертами

З'явилися питання?

Зв'яжіться з експертами З'явилися питання?

+
@
Згода на обробку персональних даних

Користувач, оформляючи заявку на сайті https://avada-media.ua/ (далі – Сайт), погоджується з умовами цієї Згоди на обробку персональних даних (далі – Згода) відповідно до Закону України “Про захист персональних даних”. Прийняттям (акцептом) оферти Згоди є відправка заявки з Сайту або замовлення у Оператора за телефонами Сайту.

Користувач дає свою згоду на обробку своїх персональних даних з наступними умовами:

  1. Дане Згода дається на обробку персональних даних як без, так і з використанням засобів автоматизації. </ Li>
  2. Згода поширюється на наступну інформацію: ПІБ, телефон, електронна пошта. </ Li>
  3. Згода на обробку персональних даних дається з метою надання Користувачу відповіді на заявку, подальшого укладення та виконання зобов’язань за договорами, здійснення клієнтської підтримки, інформування про послуги, які, на думку Оператора, можуть представляти інтерес для Користувача, проведення опитувань і маркетингових досліджень . </ li>
  4. Користувач, надає Оператору право здійснювати наступні дії (операції) з персональними даними: збір, запис, систематизація, накопичення, зберігання, уточнення (оновлення, зміну), використання, знеособлення, блокування, видалення і знищення, передача третім особам, з згоди суб’єкта персональних даних і дотриманням заходів, що забезпечують захист персональних даних від несанкціонованого доступу. </ li>
  5. Персональні дані обробляються Оператором до завершення всіх необхідних процедур. Також обробка може бути припинена за запитом Користувача на електронну пошту: info@avada-media.com.ua </ li>
  6. Користувач підтверджує, що, даючи Згода, він діє вільно, своєю волею і в своєму інтересі. </ Li>
  7. Справжнє Згода діє безстроково до моменту припинення обробки персональних даних з підстав, зазначених у п.5 даного документа. </ Li>
    </ Ol>
Долучайтеся до нас

Надіслати резюме

+
@