custom_indicator 0.0.3

simple customizable circle & linear indicator.

a package to create and customize linear & circle indicator easily.

Features

🌟customizable circle indicator
🌟customizable linear indicator

[assets/gif/linear.gif]

Getting started

Install it

add package to your pubspec.yaml file

    dependecies:
        flutter:
            sdk: flutter
        custom_indicator: any

Or

flutter pub add custom_indicator

import id

import 'package:custom_indicator/custom_indicator.dart';

Usage

use indicator without adding value

    CustomLinearIndicator()

    CustomCircleIndicator()

add idicator with value

CustomCircleIndicator(
    value: 100,
    backColor: Colors.red,
),

CustomLinearIndicator(
    value: 100,
    backColor: Colors.red,
),

[assets/img/circle100.png]

[assets/img/linear100.png]

change indicator type

CustomCircleIndicator(
    value: 35,
    backColor: Colors.red,
    pointerColor: Colors.red,
    indicatorType: IndicatorType.pointer,
),

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    indicatorType: IndicatorType.pointer,
),

[assets/img/circle35pointer.png]

[assets/img/linear35pointer.png]

check on finish

CustomCircleIndicator(
    value: 100,
    checkOnFinish: true,
    backColor: Colors.red,
),

CustomLinearIndicator(
    value: 100,
    backColor: Colors.red,
    checkOnFinish: true,
    height: 70,
),

[assets/img/circlecheckOnFinish.png]

[assets/img/linear100checked.png]

change linear edge

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    edgeType: EdgeType.square,
),

[assets/img/linear35square.png]

fill linear indicator

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    filled: true,
),

[img]

To hide indicator value set showValue property to false

CustomLinearIndicator(
    value: 35,
    backColor: Colors.red,
    checkOnFinish: true,
    filled: true,
    showValue: false,
),

[assets/img/linear35hidevalue.png]