Як влаштований Flutter
У Flutter усе, що бачить користувач, складається з віджетів: кнопка, відступ, список, цілий екран. Віджети вкладаються один в одного, як конструктор, і з них збирається будь-який інтерфейс.
Flutter має власний рушій відображення: він не просить iOS чи Android намалювати кнопку, а малює її сам. Звідси і його головна сильна сторона — однаковий вигляд усюди, і головна особливість — застосунок не використовує системні елементи напряму. Для публікації код компілюється в машинний код для кожної платформи, тож працює швидко.
Крім мобільних застосунків, з того самого коду можна зібрати веб-версію і програми для Windows, macOS та Linux. Наскільки це доречно — залежить від задачі.
Переваги Flutter
- Один код для двох платформ. І логіка, і інтерфейс пишуться один раз, тому розробка й подальша підтримка обходяться дешевше, ніж два нативні застосунки.
- Дизайн без компромісів. Те, що намалював дизайнер, реалізується точно: власні шрифти, тіні, анімації, нестандартні елементи.
- Гаряче перезавантаження. Розробник бачить зміни на екрані телефона майже одразу, без повного перезапуску. Це прискорює роботу з інтерфейсом.
- Готові набори елементів. У Flutter є віджети в стилі Material Design для Android і в стилі iOS, тож звичний вигляд досяжний без розробки з нуля.
- Плавна робота. Анімації та прокручування працюють стабільно навіть на недорогих смартфонах, якщо екрани написані акуратно.
Недоліки та обмеження
- Більший розмір застосунку. Рушій Flutter входить у кожну збірку, тому мінімальний застосунок важить більше за нативний.
- Не зовсім системний вигляд. Віджети імітують елементи iOS та Android, і уважний користувач може помітити дрібні відмінності. Після оновлень системи ці відмінності іноді стають помітнішими.
- Нові функції ОС — через пакети. Доступ до нових можливостей iOS чи Android з’являється, коли хтось напише відповідний пакет. Інакше пишемо модуль самі.
- Якість пакетів різна. Частину сторонніх пакетів підтримують ентузіасти, і вони можуть бути покинуті. Кожен пакет ми перевіряємо перед використанням.
- Веб-версія не для контентних сайтів. Flutter для вебу підходить для внутрішніх панелей, але не для сайтів, яким важливі швидке завантаження та SEO.
Коли краще обрати інший інструмент
- Ваш веб-продукт уже написаний на React, і є розробники, які його підтримують, — розумніше подивитися на React Native: частину коду й знань можна використати повторно.
- Застосунок глибоко працює з камерою, звуком, доповненою реальністю чи фоновими процесами — надійніше окремі нативні застосунки.
- Потрібен лише зручний доступ до сайту з телефона без публікації в магазинах — варто розглянути прогресивний веб-додаток.
Пакети та нативні модулі
Для більшості типових задач у Flutter є готові пакети: оплата, карти, сповіщення, вхід через Google і Apple, аналітика, Firebase. Але «є пакет» ще не означає «можна брати». Ми дивимося, хто його підтримує, як часто виходять оновлення, чи працює він з актуальною версією Flutter і чи немає в ньому відомих проблем.
Якщо надійного пакета немає, пишемо власний нативний модуль: частину на Swift для iOS, частину на Kotlin для Android, і з’єднуємо її зі спільним кодом. Так підключаються, наприклад, специфічні платіжні термінали чи сторонні SDK, для яких немає Flutter-версії.
Структура коду і керування станом
Невеликий Flutter-застосунок легко написати «як вийде», але з кожною новою функцією такий код стає крихкішим. Головне питання — де зберігаються дані, які бачить користувач (кошик, профіль, фільтри), і як екрани дізнаються про їх зміну. Це називають керуванням станом.
Ми обираємо підхід під розмір продукту: для простих застосунків — легші рішення, для великих — суворіше розділення інтерфейсу, логіки й роботи з даними. Так нові розробники швидше розбираються в проєкті, а зміна одного екрана не ламає інші.
Flutter для вебу й комп’ютера
Одна з переваг Flutter — можливість зібрати з того самого коду веб-версію або програму для комп’ютера. Це зручно для внутрішніх інструментів: наприклад, мобільний застосунок для кур’єрів і панель для диспетчера з однаковою логікою. Для публічних сайтів ми радимо окрему веб-розробку.
Новий проєкт чи доопрацювання наявного
Новий застосунок починаємо з дизайн-системи: кольори, шрифти, кнопки, поля й картки спершу стають набором власних віджетів. Після цього екрани збираються швидше, а зміни стилю вносяться в одному місці.
Наявний Flutter-проєкт нерідко потрапляє на доопрацювання у стані «давно не оновлювали». Flutter розвивається швидко, і застосунок, який кілька років стояв без оновлень, може вже не збиратися з актуальними інструментами Apple і Google. Ми оцінюємо, які пакети застаріли, що зміниться при оновленні, і переводимо проєкт на свіжу версію поетапно.
Що впливає на вартість
- Дизайн: стандартні елементи Material Design чи повністю власний фірмовий інтерфейс з анімаціями.
- Нативні модулі: скільки функцій не покривають готові пакети.
- Серверна частина: наявний API, який достатньо підключити, чи нова серверна розробка.
- Платформи: лише телефони чи ще планшети, веб-версія або програма для комп’ютера.
- Стан наявного проєкту: для доопрацювань — версія Flutter, кількість застарілих пакетів, наявність тестів.
Оцінку даємо після розбору задачі, поділивши роботу на зрозумілі етапи.
Часті запитання
Чи підходить Flutter для великих застосунків? Так, якщо від початку закласти зрозумілу структуру проєкту й керування станом. Проблеми великих Flutter-застосунків зазвичай пов’язані з архітектурою, а не з самим інструментом.
Чи буде застосунок на iOS виглядати як Android-застосунок? Ні, якщо дизайн продумано для обох платформ. Можна використовувати один фірмовий стиль або показувати звичні для кожної системи елементи там, де це важливо.
Чи можна оновити старий Flutter-проєкт, який писала інша команда? Так. Почнемо з перевірки коду, версій і пакетів, а тоді запропонуємо план оновлення.
Хто підтримує Flutter? Фреймворк розробляє Google разом зі спільнотою, він має відкритий код і регулярно оновлюється.
Чому Promodex
З 2015 року Promodex реалізував 750+ проєктів. Серед мобільних застосунків, з якими ми працювали, — My Viva та MyAmeria. Дизайн і розробку веде наша штатна команда в Києві, без підрядників, тому дизайнер і Flutter-розробник обговорюють кожен екран напряму. Після запуску допомагаємо з підтримкою й розвитком застосунку: оновлюємо Flutter і пакети, додаємо функції, стежимо за стабільністю.
