whiteboardkit

Description:

whiteboardkit

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

live demo: https://abdulaziz-mohammed.github.io/whiteboardkit
Usage #
import whiteboardkit.dart
import 'package:whiteboardkit/whiteboardkit.dart';
copied to clipboard



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();
}
copied to clipboard
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,
),
),
],
),
),
);
}
copied to clipboard



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();
}
copied to clipboard
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,
),
),
],
),
),
);
}
copied to clipboard



Stream (e.g. online whiteboard): #
Define SketchStreamController:
PlayerController controller;

@override
void initState() {
controller = new SketchStreamController();
super.initState();
}
copied to clipboard
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,
),
),
],
),
),
);
}
copied to clipboard
Later, supply it with DrawChunk when recived from DrawingController:
controller.addChunk(chunk);
copied to clipboard
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) {
}
copied to clipboard
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