Note: Graphite is a relatively new and experimental GPU rendering backend within Skia, and as of now, Flutter does not officially support it out-of-the-box. Integrating Graphite into Flutter involves building a custom Flutter engine with the appropriate Skia flags enabled. The process below assumes familiarity with building the Flutter engine from source and working with GN/Ninja build systems.
Prerequisites:
- A working Flutter engine development environment:
- Follow the official Flutter engine build instructions: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md
- A platform that supports Graphite’s current GPU backends (e.g., Metal on macOS/iOS or Dawn on certain platforms).
1. Clone the Flutter Engine Repository
If you haven’t already, clone the Flutter engine source code:
git clone https://github.com/flutter/engine.git
cd engine
Make sure to check out the branch or tag that corresponds to the version of Flutter you want to modify. For example:
git checkout master
2. Sync Dependencies
Use the provided script to fetch all necessary third-party dependencies:
./flutter/tools/gn --unoptimized
gclient sync
3. Determine Your Target Platform and Graphite Backend
Graphite currently requires a GPU backend, such as Metal on Apple platforms or Dawn on others. For instance:
- For macOS/iOS: You would use
skia_use_graphite_mtl = true
. - For experimental desktop use with WebGPU/Dawn:
skia_use_graphite_dawn = true
.
At minimum, you need skia_use_graphite = true
.
4. Generate Build Files with GN
You will customize the GN args to enable Graphite. The typical GN invocation for a debug-unoptimized build might look like this:
./flutter/tools/gn \
--unoptimized \
--no-lto \
--enable-font-subset \
--embedder-for-target \
--runtime-mode debug \
--ios --simulator (if building for iOS simulator, for example)
To enable Graphite, you need to add GN args. You can do this by passing --args
to gn gen
directly or by editing args.gn
manually. For example, if running gn gen
manually:
gn gen out/host_debug_unopt --args='skia_use_graphite=true skia_use_graphite_mtl=true'
Note:
skia_use_graphite=true
turns on the Graphite backend in Skia.skia_use_graphite_mtl=true
is required if you want to use Metal on an Apple platform.
If you’re targeting another platform, considerskia_use_graphite_dawn=true
.
5. Build the Engine
Once the configuration is set, build the Flutter engine with:
ninja -C out/host_debug_unopt flutter_engine
Replace host_debug_unopt
with the name of your build directory if you used a different configuration name.
6. Use the Custom Engine in Your Flutter App
To run your Flutter app using the newly built engine, use:
flutter run --local-engine=host_debug_unopt --local-engine-src-path=<path_to_your_engine_src>
Where <path_to_your_engine_src>
is the directory where you cloned the engine source.
7. Verifying the Graphite Backend
If the engine successfully builds and runs, you can add logging or debug prints in the engine code (particularly in places where the renderer is set up) to confirm that Graphite is being initialized instead of the legacy Skia GPU backend.
- Experimental Status: Graphite is still under active development and may not integrate seamlessly with Flutter’s compositor. You may encounter rendering artifacts, instability, or performance issues.
- Maintaining Sync with Upstream: Since Graphite support isn’t mainstream in Flutter, you’ll need to periodically rebase and rebuild as upstream changes happen.
- Limited Documentation: Official documentation on enabling Graphite in Flutter is limited. You may need to read Skia’s and Flutter’s source code comments or commit messages for the latest state of Graphite integration.
- GPU Requirements: Ensure you’re testing on hardware that supports the required GPU backend. Graphite often relies on modern APIs like Metal, Vulkan, or Dawn (WebGPU), which might not be available on all devices or OS configurations.
By following these steps, you can experiment with enabling Skia’s Graphite backend in Flutter. Keep in mind that this is highly experimental and not yet officially supported, so proceed with caution and be prepared to troubleshoot and adapt as both Skia and Flutter evolve.
@dickermoshe it's only a starting point, but it understood the query well enough that I think it could guide someone through the whole process that didn't really know much about anything.