whiteboardkit 0.2.2

Flutter Android iOS web

An awesome Flutter whiteboard implementation with drawing toolbox.

whiteboardkit #

A Flutter whiteboard widget with so much extendability and flexibility to be used with no need to rewrite your own whiteboard. Enjoy !

Package demo

live demo: https://abdulaziz-mohammed.github.io/whiteboardkit

Usage #

import whiteboardkit.dart

import 'package:whiteboardkit/whiteboardkit.dart';

     

Drawing: #

Define DrawingController and listen to change event:

  DrawingController controller;

  @override
  void initState() {
    controller = new DrawingController();
    controller.onChange().listen((draw){
      //do something with it
    });
    super.initState();
  }

Place your Whiteboard inside a constrained widget ie. Container,Expanded etc

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Whiteboard(
                controller: controller,
              ),
            ),
          ],
        ),
      ),
    );
  }

     

Playback: #

Define PlaybackController and supply it with a WhiteboardDraw object:

  PlaybackController controller;

  @override
  void initState() {
    var draw = WhiteboardDraw.fromWhiteboardSVG("<svg...");
    controller = new PlaybackController(draw);
    super.initState();
  }

Place your Whiteboard inside a constrained widget ie. Container,Expanded etc

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Whiteboard(
                controller: controller,
              ),
            ),
          ],
        ),
      ),
    );
  }

     

Stream (e.g. online whiteboard): #

Define SketchStreamController:

  PlayerController controller;

  @override
  void initState() {
    controller = new SketchStreamController();
    super.initState();
  }

Place your Whiteboard inside a constrained widget ie. Container,Expanded etc

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Whiteboard(
                controller: controller,
              ),
            ),
          ],
        ),
      ),
    );
  }

Later, supply it with DrawChunk when recived from DrawingController:

  controller.addChunk(chunk);

You'l need to enable chunks producing in DrawingController then start listening to new chunks:

    controller = new DrawingController(enableChunk: true);
    _chunkSubscription = controller.onChunk().listen((chunk) {
    }

DrawChunk supports:

  • chunk.toJson()
  • DrawChunk.fromJson("...")
    which together can help in transfering chunks through network or any other medium

     

WhiteboardDraw class: #

  • Map<String, dynamic> toJson() #

  • WhiteboardDraw.fromJson(Map<String, dynamic> json) #

  • string getSVG(): #

    Export to SVG Image format string