Flutter Shader Compilation

Various Flutter Shader Compilation

How to build Android and iOS apps with Flutter shader compilation enabled.

Flutter provides command line tools for app developers to collect shaders in the SkSL (Skia Shader Language) format that end users may require. The SkSL shaders can then be bundled into the app and pre-compiled when an end-user first launches the app, reducing compilation jank in subsequent animations.

You can check the official Flutter documentation for more details here.

Steps to build with Flutter shader compilation.

  1. Build the app in profile mode in your local machine with actual device connected. Play around with the app to trigger as many animations as you need, especially the ones with compilation jank.
flutter run --profile --cache-sksl --purge-persistent-cache

  1. Press M at the flutter run command line to save the captured SkSL shaders to a file called flutter_01.sksl.json in your root directory.

  2. Commit the file to your Github Repository.

  3. Build the app with SkSL warm-up with your Codemagic Workflow by passing the additional argument --bundle-sksl-path flutter_01.sksl.json to your build command. For e.g

  scripts:
    - name: Build Flutter
      script: | 
        flutter build ipa --bundle-sksl-path flutter_01.sksl.json

Note: The flutter profile mode is available only on actual iOS/Android Devices. It might not run properly on the simulator/emulator. You can check the official Flutter documentation for the flutter profile mode here.

You can refer to the FAQs related to Flutter shader compilation here.