Flutter Painting Tools

A simple flutter library that allows the user to paint on the screen.

Getting started

• Painting Board
• Painting Board Controller
  • setting up the controller
  • paint with multiple colors
  • delete the painting
  • delete last line painted
• Painting Color Bar

Painting Board

For a basic usage you can just show a simple board on the screen where the user can paint, by displaying a PaintingBoard in your code.

For example:

Center(
    child: PaintingBoard(
        boardHeight: 500,
        boardWidth: 300,
    ),
)

Which will produce an output like this:

You can customize your PaintingBoard how much do you want by changing its parameters

Painting Board Controller

Setting up the controller

If you want do perform advanced task, such as paint with different colors, delete the painting, ecc. you need to set up a PaintingBoardController.
Follow these steps to do it properly:

1. Declare the PaintingBoardController inside the state of your StatefulWidget

   late final PaintingBoardController controller;
   

2. Allocate the PaintingBoardController inside the initState() method of your StatefulWidget

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

3. Remember to dispose the PaintingBoardController inside the dispose() method of your StatefulWidget

   @override
   void dispose() {
       controller.dispose();
       super.dispose();
   }
   

4. Pass the PaintingBoardController to the controller property of the PaintingBoard

   PaintingBoard(
       controller: controller,
   )
   

Paint with multiple colors

The default color of the "brush" used to paint inside the board is Colors.black. If you want to paint with different colors you can use the changeBrushColor() method of the PaintingBoardController and pass to it the color you want.

Suppose for example you want to change the color of the "brush" when a button is tapped. You may do something like this:

ElevatedButton(
    onPressed: () {
        controller.changeBrushColor(Colors.blue);
    }
)

Delete the painting

If you want to delete everything inside your PaintingBoard you can simply call the deletePainting() method of the PaintingBoardController.

Example:

IconButton(
    onPressed: () => controller.deletePainting(),
    icon: const Icon(Icons.delete),
)

Delete last line painted

It is very simple to delete the last line painted. You just need to call the deleteLastLine() method of the PaintingBoardController.

Example:

IconButton(
    onPressed: () => controller.deleteLastLine(),
    icon: const Icon(Icons.delete),
)

Painting Color Bar

If you want to use a simple default bar to select the color, you can use the PaintingColorBar widget.

You can play with different properties to style this widget how much do you want: