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
import whiteboardkit.dart
import 'package:whiteboardkit/whiteboardkit.dart';
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,
),
),
],
),
),
);
}
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,
),
),
],
),
),
);
}
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
- Export to SVG Image format string
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent