Skip to main content

Tutorial: A Flutter+Rust app

In this tutorial, let us draw a Mandelbrot set (a well-known infinite-resolution "image" generated by a simple math formula). The image is plotted in Flutter UI, generated by Rust algorithm, and communicated via this library.

(Click to see: What is a Mandelbrot set)

The Mandelbrot set is the set of complex numbers c for which the function f_c(z)=z^{2}+c does not diverge to infinity when iterated from z=0. Images of the Mandelbrot set exhibit an elaborate and infinitely complicated boundary that reveals progressively ever-finer recursive detail at increasing magnifications.

Image credit: Simpsons contributor

Get code​

Please install Flutter (optionally with desktop support if you want to run app on desktop instead of cellphones), install Rust, and have some familiarity with them. Then get the example codebase:

git clone https://github.com/fzyzcjy/flutter_rust_bridge && cd flutter_rust_bridge/frb_example/with_flutter

Optional: Run generator​

This step is optional, since I have generated the source code already (in quickstart). Even if you do it, you should not see anything changed.

As soon as you make any modification to api.rs, you need to run codegen again. More information about requirements for code generation can be seen in the Installing dependencies section.

At this step you may need to setup dependencies.

Run app​

Prelogue: Command details​

The CI workflow is useful if you want details of each command. The flutter_android_test, flutter_ios_test, flutter_windows_test, flutter_macos_test and flutter_linux_test demonstrates the exact commands needed to run this tutorial codebase from a brand new machine.

Android app​

See Android setup

iOS app​

Modify Cargo.toml to change cdylib to staticlib, then run cargo lipo && cp target/universal/debug/libflutter_rust_bridge_example.a ../ios/Runner to build Rust and copy the static library. Then run the Flutter app normally such as flutter run.

Remark: This tutorial will help you automatically execute cargo builds when building Flutter app.

Windows app​

Run it directly using flutter run assuming Flutter desktop support has been configured. More details can be seen in #66.

Linux app​

Same as Windows. If you install Flutter through snap, please be wary of #53.

MacOS app​

Same as Windows. (P.S. Under the hood, cargo-xcode is used to automate the process)

Web (as a webpage)​

Install flutter_rust_bridge_serve to simplify the process of building and serving a WASM binary. See Web setup for more details.