Kids- Colouring game

[mulundapm]

Create a web-based game to be implemented into bible kids ap

Acceptance criteria:

• [ ] Picture Selection- Provide a library of colouring sheets to choose from
• [ ] Predefined Color Palette- Offer a user-friendly palette of colours, ensure each colour from palette is accessible
• [ ] Ensure the colours are easy to switch between and a feedback to user on which is the currently selected colour
• [ ] Allows users to fill a selected area (a closed space in colouring sheet is defined as a selectable area) with a chosen color
• [ ] Enable users to zoom in on specific areas of the picture for finer details
• [ ] Implement a panning feature to navigate the picture while zoomed in
• [ ] Include undo and redo functionality to correct mistakes or experiment with different color choices
• [ ] Allow users to save their coloured pictures to their device's gallery
• [ ] An intuitive and child-friendly interface with large, easily clickable buttons
• [ ] Add background music (file uploading soon)

Colouring sheets BCCO_Jesus_child_A4.pdf fargeleggingsark_PaulusogSilas2.pdf fargeleggingsark_Peter_og_Anden2.pdf Guds-rike.pdf

Jesus_i_tempelet_fargelegging1.pdf

SISA_S01_E04_FL_Jesus_med_barna.pdf SISA_S01_E06_FL_02-kopi.pdf Untitled_Artwork-7.pdf Untitled_Artwork-9.pdf

Predefined Color Palett:

[andreasgangso]

If this gets acceptance criteria we can publish the task on discord for volunteering

[eliezerben]

@andreasgangso Some research I did on this:

Different options I tested:

1. Use a bitmap image instead of svg and use floodfill algorithm to fill closed shapes. This package could be used: https://pub.dev/packages/floodfill_image Problem with this approach is all the disadvantages of a non-vector format.

2. WebView Flutter doesn't seem to have support for interacting with svg images. So one option is to make the game using web technologies and embed it in flutter. The challenge I see with this is that, each area that can be colored should be a closed path. Something like this: https://assets.codepen.io/40041/crest.svg. If the svg file just contains a bunch of strokes separating the colorable areas, it won't work. So the svg image will have to be specifically customized for this. Some References for web implementations: https://codepen.io/MacEvelly/pen/YXyRVE https://uxdesign.cc/5-steps-to-create-a-simple-digital-coloring-book-in-react-3d4f5b2af822

3. Use flutter's CutsomPainter and draw the svg onto the canvas by converting the svg paths to dart Paths Found this page which can convert svg to CustomPainter code: https://fluttershapemaker.com I think this needs a lot of manual work to make it interactive.

Flutter project where I tried these options: https://github.com/eliezerben/flutter_coloring_test Didn't get enough time to make the CustomPainter interactive.