Kids Coloring App

Kids Coloring Book

Documentation v1.0.0

• Introduction

• Features

• Requirements

• Installation

• Project Structure

• Core Components

• State Management

• Local Storage

• Customization

• Support

Introduction

Kids Coloring Book is a feature-rich Flutter application designed to provide an engaging and interactive coloring experience for children. This documentation will guide you through the setup, features, and customization options available in the app.

This document is for version 1.0.0 of Kids Coloring Book.

Features

Flood Fill Coloring

Interactive coloring mechanism with smart area detection

Custom Color Picker

Kid-friendly color selection with predefined palettes

Image Management

Save, organize, and share colored images

Undo/Redo

Multiple levels of undo/redo support

Requirements

Requirement Version Flutter SDK 2.0.0 or higher Dart SDK 2.12.0 or higher Android Studio / VS Code Latest stable version

Dependencies

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  shared_preferences: ^2.0.0
  path_provider: ^2.0.0
  flutter_colorpicker: ^1.0.0
  google_fonts: ^4.0.0
  permission_handler: ^10.0.0
  iconsax: ^0.0.8

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd kids_coloring_book

3. Install dependencies:

   flutter pub get

4. Run the app:

   flutter run

Project Structure

lib/
├── main.dart
├── screens/
│   ├── coloring/
│   │   ├── coloring_screen.dart
│   │   ├── coloring_gallery_screen.dart
│   │   └── widget/
│   ├── home/
│   │   └── home.dart
│   ├── edited_images_screen.dart
│   └── favorite_images_screen.dart
├── providers/
│   ├── edited_images_provider.dart
│   └── favorite_images_provider.dart
├── services/
│   ├── edited_images_service.dart
│   └── storage_service.dart
└── utils/
    └── image_flood_fill.dart

Core Components

Image Flood Fill

The core coloring mechanism uses an optimized flood fill algorithm with three implementations:

• Basic recursive flood fill

• Queue-based flood fill

• Span-based flood fill (recommended)

class ImageFloodFillSpanImpl extends FloodFill<ui.Image, Color> {
    // Implementation details in utils/image_flood_fill.dart
}

Color Picker

The custom color picker includes:

• Pre-defined color palettes

• Custom color creation

• Color wheel and grid views

• Recent colors history

State Management

The app uses Provider for state management with two main providers:

• EditedImagesProvider: Manages saved colored images

• FavoriteImagesProvider: Handles favorite images

class EditedImagesProvider extends ChangeNotifier {
    // Implementation details
}

Local Storage

The app uses SharedPreferences for persistent storage of:

• Edited images paths

• Favorite images paths

• User preferences

Customization

Theming

Customize the app's appearance by modifying the theme in main.dart:

ThemeData(
    colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.white,
        primary: Colors.amber,
        // Customize colors here
    ),
    // More theme customization
)

Adding New Images

To add new coloring pages:

1. Add images to assets/coloring_pages/

2. Update the pubspec.yaml file

3. Add image paths to the gallery list

Modifying Color Palettes

static final List<List<Color>> _colorPalettes = [
    // Modify color palettes here
];

Support

For support, questions, or bug reports, please contact:

• Email: marouane.fagri1@gmail.com

• GitHub Issues: https://github.com/mfagri/Kids-Coloring-Book/issues

Version History

• 1.0.0 Initial release

• 1.1.0 Added undo/redo functionality

• 1.2.0 Implemented favorites system