Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Detalhes do pacotev0.2.2

whiteboardkit

Uma incrível implementação de quadro branco do Flutter com caixa de ferramentas de desenho.

pub.dev Documentação da API Código-fonte
Downloads em 30 dias
29
Curtidas
50
Pontos Pub
35

Instalar pacote

flutter pub add whiteboardkit

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

WhiteboardKit é um pacote Flutter que fornece uma implementação de quadro branco totalmente funcional com uma caixa de ferramentas intuitiva para desenho. Permite aos usuários desenhar, apagar e anotar em uma tela com ferramentas personalizáveis, como canetas, marcadores e borrachas. Projetado para simplicidade e desempenho, suporta entrada por toque e se integra perfeitamente em aplicativos que exigem esboços em tempo real ou anotações colaborativas. Ideal para aplicativos educacionais, de design ou de anotações, oferece uma experiência de desenho suave e responsiva em diferentes dispositivos.

Casos de uso

  • Desenho digital
  • Painel branco colaborativo
  • Ferramentas educacionais
  • Anotação interativa
  • Prototipagem de design

Principais recursos

  • Caixa de ferramentas de desenho com várias ferramentas
  • Suporte de entrada por toque em tempo real
  • Estilos de traço personalizáveis
  • Integração simples com o Flutter
  • renderização de canvas responsiva

Indicado para

  • Educators
  • Designers
  • Desenvolvedores de aplicativos
  • Students
  • Ferramentas de colaboração remota

Considerações

  • Otimizações limitadas específicas para a plataforma
  • Sem sincronização em nuvem embutida
  • Requer gerenciamento manual de estado
  • Não otimizado para grandes telas
  • Histórico de desfazer/refazer por padrão

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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

Categorias

Desenho, Pintura e Assinatura

Dependências

Lista de dependências 5 itens

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.