Streakify is a Flutter package for displaying a grid of days with target achievements. It allows you to visualize streaks or goals with customizable colors and tap handling.

Features

  • Display a grid of days with customizable colors.
  • Support for tap interactions to handle user input.
  • Flexible styling options for borders, colors, and layout.

Preview

preview

Usage

Add streakify to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  streakify: ^0.0.2

Import the package in your Dart file:

import 'package:streakify/streakify_widget.dart';
 StreakifyWidget(
              numberOfDays: 20,
              crossAxisCount: 4,
              margin: const EdgeInsets.all(40),
              isDayTargetReachedMap: Map.fromEntries(
                List.generate(
                  numberOfDays,
                  (index) => MapEntry(
                    index,
                    index % 2 == 0 || index % 3 == 0 || index % 5 == 0,
                  ),
                ),
              ),
              height: 100,
              width: 350,
              onTap: (index) {
               /// perform on square tapped
              },
            ),

This table outlines each attribute of the StreakifyWidget along with its type, default value, and a brief description of what it does.

Attribute Type Default Description
numberOfDays int Required The total number of days to display in the grid.
isDayTargetReachedMap Map<int, bool> Required A map where the key is the day index, and the value is whether the target for that day is reached (true for reached, false for not).
emptyColor Color Colors.grey The background color for days where the target is not reached.
filledColor Color Colors.green The background color for days where the target is reached.
height double 100 The height of the widget container.
width double 400 The width of the widget container.
onTap void Function(int index)? null A callback function triggered when a day is tapped. The index of the day is passed as an argument.
crossAxisCount int 7 The number of columns in the grid (i.e., how many items per row).
margin EdgeInsetsGeometry EdgeInsets.all(10) The margin around the entire widget.
padding EdgeInsetsGeometry EdgeInsets.all(10) The padding inside the widget container, around the content.
borderRadius BorderRadius BorderRadius.circular(8) The border radius for rounding the corners of the widget container.
borderColor Color? Colors.grey.withOpacity(0.4) The color of the border around the widget. If null, a semi-transparent grey is used.
borderWidth double 1 The thickness of the border around the widget.
scrollDirection Axis Axis.horizontal The direction in which the grid can be scrolled (horizontal or vertical).
scrollPhysics ScrollPhysics BouncingScrollPhysics() The physics for scrolling behavior, such as bounce, inertia, etc.
mainAxisSpacing double 2 The vertical spacing between items in the grid.
crossAxisSpacing double 2 The horizontal spacing between items in the grid.