Flutter
Flutter is Google's open-source UI toolkit for mobile, web and desktop apps from one Dart codebase. How it works, common mistakes and testing the backend.
What is Flutter?
Flutter is Google's open-source UI toolkit for building apps for mobile, web and desktop from one codebase written in the Dart language. Instead of wrapping the system's native controls, Flutter draws its own interface with its own rendering engine, and everything you see is built from widgets. A single project can target Android, iOS, Windows, macOS, Linux and the web.
How Flutter works
Dart and compilation
During development, Flutter apps run in a VM, which gives you stateful hot reload: you change the code and see the result without a full recompile. For release builds, Flutter compiles Dart directly to machine code (Intel x64 or ARM). On the web, Dart compiles to JavaScript or WebAssembly instead. The current list of supported platforms and OS versions is on the Flutter supported platforms page and changes between releases.
Widgets
A widget is an immutable description of part of the user interface. You compose small widgets into a tree: a button sits in a column, which sits in a scaffold, which sits in the app. When state changes, Flutter rebuilds the affected widgets, so the screen is a function of your state. Flutter has its own implementation of each UI control rather than using the system's.
Rendering with Impeller
The Flutter engine, written mostly in C++, rasterizes each frame. Impeller is its renderer, and it compiles shaders at engine-build time so they do not compile while the app runs. According to the Flutter docs for version 3.47, Impeller is the only supported renderer on iOS, is enabled by default on Android API 29 and later (older devices fall back to OpenGL), and is enabled by default on macOS, Linux and Windows. Flutter on the web still uses Skia.
Example
A food-delivery team builds one app. A restaurant list screen is a ListView of card widgets fed by a REST endpoint. Tapping a card pushes a detail screen. The same Dart code ships to the App Store, Google Play and a web build, and platform-specific parts such as push notifications are handled through plugins.
Common mistakes
- Testing only on a fast emulator or a flagship phone. Frame drops show up on older hardware, so test on a low-end device.
- Rebuilding large widget subtrees on every state change. Keep state close to the widgets that use it.
- Calling the backend from many screens with no caching or pagination, so every navigation triggers slow requests. See API pagination.
- Treating "one codebase" as "no platform work". Permissions, store rules, push notifications and web behavior still differ per platform.
Flutter, load testing and monitoring
Flutter's speed on screen is a client-side matter, handled with Flutter's own profiling tools on real devices. What the app waits for is usually the backend. Every screen that loads data calls an API endpoint, and slow latency there looks like a slow app. LoadFocus does not profile the Flutter UI, but it can test the services behind it. Use load testing to see how those endpoints behave when many users open the app at once, and API monitoring to check them around the clock and alert you when one fails or slows down. Two practical reads: measuring mobile app load times with cloud load testing and optimizing mobile API performance. If you are comparing toolkits, see React Native and Expo.
FAQ
What language does Flutter use?
Flutter uses Dart. Dart is object-oriented, and Flutter apps compile to native machine code for release builds, or to JavaScript or WebAssembly for the web.
Which platforms does Flutter support?
Android, iOS, Windows, macOS, Linux and the web. Supported OS versions and browsers change with each release, so check the supported platforms page of the Flutter docs.
Is Flutter the same as React Native?
No. Both build cross-platform apps, but Flutter draws its own UI with its own engine and uses Dart, while React Native uses JavaScript and renders through native UI components.
How do I test the backend of a Flutter app?
The backend is a normal HTTP API, so you can load test and monitor its endpoints with the same tools you would use for any other client. Check response time and error rate, not just that the app launches.
Related terms
Related LoadFocus Tools
Put this concept into practice with LoadFocus, the same platform that powers everything you just read about.