whiteboardkit 0.2.2 copy "whiteboardkit: ^0.2.2" to clipboard
whiteboardkit: ^0.2.2 copied to clipboard

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
50
likes
40
points
53
downloads

Publisher

unverified uploader

Weekly Downloads

An awesome Flutter whiteboard implementation with drawing toolbox.

Homepage
Repository (GitHub)

License

MIT (license)

Dependencies

async, flutter, font_awesome_flutter, json_annotation, synchronized, xml

More

Packages that depend on whiteboardkit