Fluera Engine

Quickstart · ~5 min

From zero to a drawing canvas.

A minimal Flutter app with a full Fluera canvas — infinite pan/zoom, pressure-aware input, scene graph ready for your strokes. No gesture wiring or camera math to roll yourself.

Prerequisites

1. Install

Add the package to your Flutter project:

flutter pub add fluera_canvas

Pre-release? Pin directly to git:

dependencies:
  fluera_canvas:
    git:
      url: https://github.com/Lorencoshametaj/fluera-engine-landing.git
      ref: main

2. Wire the widget

A drawing canvas is two things: an InfiniteCanvasController (owns camera, pan, zoom, rotation) and an InfiniteCanvasGestureDetector that feeds input into it. Drop this into lib/main.dart, run flutter run, and draw.

import 'package:flutter/material.dart';
import 'package:fluera_canvas/fluera_canvas.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: Scaffold(body: MyCanvas()),
      );
}

class MyCanvas extends StatefulWidget {
  const MyCanvas({super.key});
  @override
  State<MyCanvas> createState() => _MyCanvasState();
}

class _MyCanvasState extends State<MyCanvas> {
  final controller = InfiniteCanvasController();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InfiniteCanvasGestureDetector(
      controller: controller,
      child: CustomPaint(
        painter: MyScenePainter(controller),
        size: Size.infinite,
      ),
    );
  }
}

The controller is a ChangeNotifier, so anything that paints (here, MyScenePainter) can subscribe and repaint when the camera moves. Pressure, tilt and palm rejection work out of the box on platforms that expose them.

3. Drive the camera

Animations are first-class. Jump, spring, or chain multi-phase camera moves:

controller.animateTo(
  offset: Offset(-400, -300),
  scale: 1.5,
  duration: const Duration(milliseconds: 600),
  curve: Curves.easeInOutCubic,
);

Tune the feel with LiquidCanvasConfig — pan friction, zoom spring stiffness and damping, elastic overshoot, node-drag physics. The defaults are tuned for stylus input; override what you need.

4. Go further

Everything above is in the MIT core package. For advanced features — collaboration, AI, PDF annotation, the full 13-brush set, encrypted storage — add fluera_engine_pro on top. See pricing.

Native live-stroke plugin (optional)

On iOS, Android and macOS the full 60 FPS path uses a native GPU overlay. During the pre-release the native renderers still ship through a separate plugin; add it to your pubspec if you want the native path:

dependencies:
  fluera_canvas: ^0.1.0
  fluera_engine:         # optional — unlocks native live-stroke
    git:
      url: https://github.com/Lorencoshametaj/fluera-engine-landing.git
      ref: main

Without it, a Dart-only painter takes over automatically. The rest of the API is identical.

What next

Stuck?

Open an issue on GitHub or email support@fluera.dev. We read everything.