Tracing Game Flutter Package #

A Flutter game that lets users trace words , characters and geometric shapes to help users practice tracing.

Installation #

To use the tracing_game package in your Flutter project, follow these steps:

1. Open your pubspec.yaml file.
2. Add the tracing_game package to your dependencies section:

dependencies:
  flutter:
    sdk: flutter
  tracing_game: ^0.0.4+1

3. Run the following command in your terminal to install the package:

flutter pub get

Features #

Tracing of English characters (both lower and upper case) and all Arabic characters. Tracing of English numbers from 1 to 10. Tracing of English words and numbers. Tracing of geometric shapes like rectangles, circles, and triangles. Interactive game-like experience with feedback. Supports custom colors and tracing options for customization. Supports multiple screens

Example #

Tracing Words #

In the TracingWordsGame, you can trace entire English words and numbers, including spaces between words. The TracingWordGame accepts a list of TraceWordModel objects, where each TraceWordModel contains a word (string) and TraceShapeOptions for customizing the appearance of the traced shapes.

Example: #

TracingWordGame(
  words: [
    TraceWordModel(
      word: 'I Have',
      traceShapeOptions: const TraceShapeOptions(
        indexColor: Colors.green,
      ),
    ),
  ],
),

Tracing character #

The TracingCharsGame accepts a list of TraceCharsModel objects that will be displayed on the screen. Each TraceCharsModel contains a list of TraceCharModel objects. The TraceCharModel accepts a character (char) and TraceShapeOptions for customizing the color and appearance of the traced shape.

Example: #

TracingCharsGame(
  showAnchor: true,
  traceShapeModel: [
    TraceCharsModel(chars: [
      TraceCharModel(
        char: 'F',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
      TraceCharModel(
        char: 'f',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
    ]),
    TraceCharsModel(chars: [
      TraceCharModel(
        char: 'a',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
      TraceCharModel(
        char: 'A',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
    ]),
    TraceCharsModel(chars: [
      TraceCharModel(
        char: '1',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
      TraceCharModel(
        char: '4',
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
    ]),
  ],
),

Tracing Geometric Shapes #

In this example, the tracing of geometric shapes like rectangles, circles, and triangles (4 types) is supported.

The TracingGeometricShapesGame accepts a list of TraceGeoMetricShapeModel objects, which will be displayed on the screen. Each TraceGeoMetricShapeModel contains a list of MathShapeWithOption objects. The MathShapeWithOption accepts a MathShapes enum to define the type of shape (e.g., circle, rectangle, triangle) and TraceShapeOptions to customize the color and appearance of the traced shape.

Example: #

TracingGeometricShapesGame(
  traceGeoMetricShapeModels: [
    TraceGeoMetricShapeModel(shapes: [
      MathShapeWithOption(
        shape: MathShapes.circle,
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
      MathShapeWithOption(
        shape: MathShapes.triangle1,
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
    ]),
    TraceGeoMetricShapeModel(shapes: [
      MathShapeWithOption(
        shape: MathShapes.rectangle,
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
      MathShapeWithOption(
        shape: MathShapes.triangle2,
        traceShapeOptions: const TraceShapeOptions(
          innerPaintColor: Colors.orange
        ),
      ),
    ]),
  ],
),

Customizing the Tracing Games #

You can customize the tracing games by providing different shapes, colors, and configurations. Here are some options:

Available Callbacks #

You can also attach various callback functions to track the progress and state of the tracing game:

• onTracingUpdated: This callback is triggered when the tracing progress is updated. It provides the current tracing index, which you can use to track the player's progress.

  onTracingUpdated: (int currentTracingIndex) async {
      print('/////onTracingUpdated:' + currentTracingIndex.toString());
  }
  

• onGameFinished: This callback is triggered when the game is finished. It provides the screen index of the last screen.

  onGameFinished: (int screenIndex) async {
      print('/////onGameFinished:' + screenIndex.toString());
  }
  

• onCurrentTracingScreenFinished: This callback is triggered when the current tracing screen is completed. It provides the index of the current tracing screen.

  onCurrentTracingScreenFinished: (int currentScreenIndex) async {
      print('/////onCurrentTracingScreenFinished:' + currentScreenIndex.toString());
  }
  

By utilizing these options and callbacks, you can fully customize the behavior and appearance of the tracing game to suit your needs.

TraceShapeOptions Class Properties: #

class TraceShapeOptions {
  final Color outerPaintColor;
  final Color innerPaintColor;
  final Color dottedColor;
  final Color indexColor;

  const TraceShapeOptions({
    this.dottedColor = AppColorPhonetics.grey,
    this.indexColor = Colors.black,
    this.innerPaintColor = AppColorPhonetics.lightBlueColor6,
    this.outerPaintColor = AppColorPhonetics.lightBlueColor5,
  });
}

MathShapes Enum: #

The MathShapes enum provides a set of predefined shapes that can be used in the tracing game. These shapes can be utilized as part of the traceShapeModel or other relevant configurations.

enum MathShapes {
  circle,
  triangle1,
  triangle2,
  triangle3,
  triangle4,
  rectangle,
}

Author: #

• GitHub
• LinkedIn

Happy coding!