system shell
Command Shell
Military-styled горизонтальний вхідний екран, який одразу подає симулятор як польову систему, а не як звичайний mobile app, з прямими входами в карту, налаштування й технічну інформацію.
Назад до каталогу
Landscape Tactical Simulator
Kropiva
Горизонтальний тактичний mobile-симулятор бойової системи «Кропива» для роботи з картою та візуалізації загроз
FlutterDartRiverpod
Огляд проєкту
Kropiva — це мобільний тактичний симулятор із дуже конкретною interaction-моделлю: пристрій тут сприймається не як звичайний portrait-додаток, а як handheld field console, який відкривається горизонтально. Локальна кодова база це добре показує. Досвід починається з military-styled control shell, переходить в immersive landscape map, підтягує бойові сценарії з локальних asset-даних, малює кордони України через GeoJSON і анімує траєкторії ворожих цілей у межах операційної зони. На інженерному рівні проєкт вимагав чисто розвести сценарні дані, map state, simulation timing, циркульні вимірювання та UI overlays, але при цьому зберегти відчуття швидкого, читабельного й тактильно зрозумілого інструмента на мобільному пристрої.
Поверхні продукту
tactical map
Operational Map
Головна landscape-поверхня з дружніми позиціями, рухомими ворожими цілями, візуалізацією траєкторій, map-type switching, симуляцією satellite-link state, rotation, zoom і маскуванням операційної зони через GeoJSON-кордон України.
distance tool
Compass Measurement Mode
On-map workflow для швидкого вимірювання відстані між точками, збереження історії вимірювань у session state та виведення результатів у спеціально спроєктованій mil-tech панелі замість стандартного утилітарного popup.
Виклик
Перекласти military-style control experience у mobile landscape form factor так, щоб інтерфейс не перевантажувався і залишався однозначним для touch-взаємодії.
Зробити в реальному часі читабельними рух ворожих цілей, тактичні overlays, вимірювальні інструменти та map-маніпуляції, не перетворивши симулятор на важкий або хаотичний екран.
Побудувати застосунок так, щоб сценарний контент, поведінка цілей, map-controls і device settings могли еволюціонувати незалежно, а не злиплися в один перевантажений stateful-screen.
Реалізація
Побудували симулятор на Flutter із landscape-first app shell і окремим immersive map wrapper, який жорстко фіксує бойовий режим у горизонтальній орієнтації та прибирає системний UI, щоб досвід відчувався ближчим до польового консолеподібного інструмента.
Розвели runtime на окремі Riverpod-шари: asset-backed завантаження локального сценарію, map-state notifier для zoom, center, rotation, lock state, map type, satellite-link status і compass measurements, а також окремий simulation notifier, що просуває траєкторії цілей у часі.
Зібрали map-surface на flutter_map з ArcGIS imagery, OpenStreetMap і terrain-тайлами, поверх яких наклали GeoJSON border masking, friendly markers, hostile markers, target code labels, trajectory rendering, compass lines і синхронізацію камери з gesture-aware поведінкою.
Залишили симулятор data-driven через локальні JSON-сценарії та типізовані моделі для дружніх позицій, цілей, launch points, trajectories і категорій загроз на кшталт Shahed-дронів, ракет, гелікоптерів і літаків.
Додали окремий settings-flow із персистентною device-side конфігурацією, включно зі звуком, вібрацією, базовим масштабом карти, grid visibility, autosave behavior, мовою та dark-mode toggles, щоб у симулятора був власний operational configuration layer.
Результат
“Переконливий mil-tech mobile simulator із чіткою product-ідентичністю, purpose-built landscape UX і сильнішим тактичним характером, ніж у generic map app, адаптованого постфактум.”
“Підтримувана state-архітектура, у якій сценарні дані, runtime simulation, map-behavior і configuration зберігають чисті межі відповідальності та готовність до розширення.”
“Практична основа для подальшого росту через нові сценарії, багатші типи загроз, додаткові measurement tools, offline data-packs і більш просунуті tactical overlays.”
Чіткий технічний напрям. Гостріший delivery.
Наступна версія ваших систем починається тут.
Почніть із bottleneck, брифу або нестабільної архітектури. Ми допоможемо перетворити це на чистіший технічний шлях.