If you're a C++ developer experienced with Qt, you already know the power of building cross-platform applications. But as mobile and web platforms continue to evolve, expanding your toolkit is key. In this webinar, we’ll compare Qt and Flutter, highlight the similarities and differences, and introduce the concepts behind Dart and Flutter to help you transition smoothly. You’ll leave with a practical roadmap for creating high-performance, visually rich applications that go beyond the desktop—bridging your Qt expertise with the future of app development.

1. From Qt
to
Flutter:
A Strategic Approach to Expanding Your
Cross-Platform Toolkit
1

2. www.ics.com
About ICS
Founded in 1987, ICS accelerates the
development of next-generation products through
cutting-edge software solutions and expert
engineering services.
● Headquarters in Waltham, MA (Greater
Boston area)
● Global presence with offices in California,
Canada, and Europe
● Team size of 160 professionals
● Expertise in embedded systems, UX/UI
design, and Qt/QML development working
in industries from medical devices and
commercial kitchen appliances to industrial
controls and in-vehicle infotainment
systems
● Leading independent source of Qt expertise
in North America.

3. • Qt strengths: C++
performance, desktop,
embedded reach
• Flutter complements Qt:
rapid UI, polished visuals,
cross-platform
• Toolkit expansion, not
replacement
Why Expand Beyond Qt?
3

4. Page 4
• Transferable skills accelerate
Flutter learning
• Rapid prototyping and MVP
development
• Cross-platform reach without
abandoning Qt
• Future-proof skills bridging
desktop/embedded with
mobile/web
Strategic
Advantages for Qt
Devs

5. • Single codebase: iOS, Android,
Web, Desktop
• Modern UI/UX: Material,
Cupertino, animations (Lottie,
Rive)
• Developer productivity: Hot
reload, DevTools, unified testing
• IoT connectivity: Bluetooth,
WiFi packages
• Vibrant community &
ecosystem
Why Choose Flutter?
Page 5

6. 1. Language: Dart is a modern, object-oriented language with a syntax that feels familiar to
developers accustomed to C++.
2. Event Handling: Dart handles asynchronous events using async/await and Streams,
replacing the signals/slots mechanism in Qt.
3. Memory Management: Dart has a garbage collector, so you don't need to manage
memory manually.
4. No Pointers: Unlike C++, Dart does not have pointers, which simplifies memory safety.
Dart vs. C++/QML: Quick Comparison
Page 6

7. 1. Everything is a Widget - unlike Qt's separation of C++/QML
2. Composition over Inheritance - prefer composing widgets vs QML's extending Items
3. Declarative State - state drives UI, not imperative property changes
4. Constraint-Based Layout - different from Qt's anchors system
5. Unidirectional Data Flow - compared to Qt's bidirectional property bindings
6. Provider-Based DI - prefer dependency injection over service locator pattern
7. Stream-Based Events - streams/subscriptions replace signal/slot connections
8. Stateless by Default - prefer stateless widgets when possible
9. Immutable State - always create new state objects rather than mutating them
Summary of Key Mental Shifts
Page 7

8. Page 8

9. • QML ↔ Flutter’s widget tree
• QObject ↔ Modular inheritance
• Qt Widgets ↔ Flutter Widgets (Stateless/Stateful)
• Signals & Slots ↔ Streams & async/await
Mapping Qt to Flutter
Page 9

10. QML ↔ Flutter’s widget tree
• Qt: QML (frontend) and C++ (backend) feel like two stitched systems
• Flutter: UI and business logic can live side-by-side in the widget tree
• No arbitrary barrier → faster iteration, easier maintenance
Mapping Qt to Flutter
Page 10

11. - Every widget contains a build() method
- Build method constructs the tree
- And can compose trees together nesting widgets
Understanding the Flutter Widget Tree
Page 11

12. ● Widget: The public API or blueprint for the framework.
● Element: Manages a widget and a widget’s render object.
● RenderObject : Responsible for drawing and laying out a specific widget instance. Also handles user interactions, like hit
testing and gestures.
Three Parallel Trees

13. QObject ↔ Modular inheritance
• In Qt, QObject serves as the base class for all objects that leverage the signals and slots
mechanism
• Flutter does not have a single base class equivalent to QObject
• Flutter uses InheritedWidget to propagate data in the tree
Mapping Qt to Flutter
Page 13

14. Qt Widgets ↔ Flutter Widgets (Stateless/Stateful)
• Qt: QWidget is the base class for all UI components
• Flutter: The Widget class serves a similar purpose
Mapping Qt to Flutter
Page 14

15. ● Stateless widgets: A widget that does not require mutable state. You can’t alter the
state or properties of Stateless widgets once it’s built. When your properties don’t need to
change over time, it’s good practice to start with a stateless widget.
● Stateful widgets: A widget that has mutable state. Stateful widgets preserve state,
which is useful when part of the UI you are describing needs to change dynamically.
● Inherited widgets: Base class for widgets that efficiently propagate information
down the tree. Lets you access state information from the parent elements in the tree
hierarchy.
Understanding Flutter Widget Types
Page 15

16. Signals & Slots ↔ Streams & async/await
• Qt: prone to race conditions, manual control needed to avoid lost signals
• Flutter: Providers/Notifiers are safer, intuitive, and handle state updates automatically
• Less fine-grain control needed → fewer bugs, cleaner architecture
Mapping Qt to Flutter
Page 16

17. The Fundamental Shift for C++/Qt Developers Transitioning to Flutter
For C++/Qt developers, the most dramatic shift when transitioning to Flutter is moving from the
signal/slot mechanism to Flutter's reactive UI pattern
Instead of manually propagating changes and ensuring the UI updates correctly, Flutter treats
the UI as a function of state
From Signal/Slot to Reactive UI
Page 17

18. In Qt:
● Define the UI's initial state.
● Write separate code to update the UI when state changes.
Flutter avoids these pitfalls by embracing reactive programming, which decouples the UI from
its underlying state. Developers focus on describing the UI as a reactive mapping of application
state through widgets, which are:
● Immutable: They serve as configuration objects for rendering the UI.
● Efficient: Flutter's framework optimizes updates, ensuring only the necessary parts of the
UI are redrawn.
No Dual Path Maintenance
Page 18

19. • QML ↔ Flutter’s widget tree
• QObject ↔ Modular inheritance
• Qt Widgets ↔ Flutter Widgets (Stateless/Stateful)
• Signals & Slots ↔ Streams & async/await
Mapping Qt to Flutter
Page 19

20. Page 20
• Ephemeral state: setState for
local UI
• Application state: Provider,
Bloc, Riverpod
• Choosing approach: complexity,
performance, team size
• Parallels with Qt MVC/MVVM
patterns
State
Management in
Flutter

21. Page 21
1. Isolate UI layer (decouple from
logic)
2. Recreate UI in Flutter (map
widgets/layouts)
3. Connect C++ logic: FFI,
Platform Channels, gRPC, Port
to Dart
4. Implement state management
5. Test & optimize
Roadmap:
Porting Qt Apps

22. - Embedded Linux UI built with flutter
using Protobuf-gRPC to connect to the
hardware layer
- Used Flutter Web to rapidly prototype
and iterate development with no
hardware present for developers
- Implemented complex animations and
designs and ran them on constrained
hardware using Rive and Lottie native
integration
- Developed and delivered in around 3
months.
Case Study: AGL Automotive IVL
Page 22

23. • Responsive UI for all devices
and screen sizes out of the box
• Full stack can be implemented
in Dart no need to learn web
programming or JS
• Handles animations and
graphics easily
• Still able to implement the most
cutting edge of web technology
Flutter Web -
Better than you
think
Page 23

24. ● Rich feature set for a web application
○ Real time multi-user application
with user presence and live
updates
○ Dynamic animations and graphics
○ AI integration across platforms
○ Interactive Whiteboarding tool
○ Used for project management and
requirement tracking across
disciplines
○ Built entirely using Dart
● Desktop class performance on the web
● From start to MVP in just a few weeks
with a team of Qt developers who had
never touched Flutter before
Case Study: Narwhal by ICS
Page 24

25. Page 25
• Flutter extends, not replaces,
your Qt expertise
• Strategic takeaway: right tool
for the right job
• ICS resources: training,
consulting, development
services
Closing &
Next Steps
https://www.ics.com/flutter-getting-started
https://www.ics.com/blog/qt-vs-flutter-which-framework-right-your-embedded-project
https://www.ics.com/blog/flutter-suitable-medical-device-software

26. Any Questions?
www.ics.com