Flutter Graphite

graphite.md

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:

1. A working Flutter engine development environment:
   • Follow the official Flutter engine build instructions: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md
2. A platform that supports Graphite’s current GPU backends (e.g., Metal on macOS/iOS or Dawn on certain platforms).

---

Step-by-Step Instructions

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, consider skia_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.

---

Important Notes & Caveats

• 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.

It really may make it easier to contribute to open source projects