square_progress_indicator 0.0.8

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

You can create customizable square progress indicators like native flutter CircularProgressIndicator widget.

Create fully customizable square or rectangle progress indicators like native flutter CircularProgressIndicator widget!

Features

Full example of SquareProgressIndicator

Live demo

You can check the example project web export on this link: https://amir14a.github.io/square_progress_indicator/ Thanks to Github!❤️

Usage

Simple usage:

const SquareProgressIndicator(),

Customize usage:

SquareProgressIndicator(
    value: _value,
    width: 100,
    height: 100,
    borderRadius: 0,
    startPosition: StartPosition.leftCenter,
    strokeCap: StrokeCap.square,
    clockwise: true,
    color: Colors.purple,
    emptyStrokeColor: Colors.purple.withOpacity(.5),
    strokeWidth: 16,
    emptyStrokeWidth: 16,
    strokeAlign: SquareStrokeAlign.center,
    child: Text("${(_value * 100).toStringAsFixed(0)}%"),
),

Additional information

Parameter	Type	Default	Info
`value`	double?	`null`	The value of the progress, it should be between 0 and 1. don't pass it to use Indeterminate mode
`width`	double	`38`	The width of rectangle that the progress line is drawn around it.
`height`	double	`38`	The height of rectangle that the progress line is drawn around it.
`borderRadius`	double	`8`	The border radius of the rectangle, it is applied to all four corners.
`color`	Color?	`progressIndicatorTheme.color`	The color of the progress line.
`emptyStrokeColor`	Color?	`progressIndicatorTheme.circularTrackColor`	The color of the line behind the progress line which show for reminding progress.
`strokeWidth`	double	`4`	The width of the progress line.
`emptyStrokeWidth`	double	`4`	The width of the line behind the progress line which show for reminding progress.
`clockwise`	boolean	`true`	The direction of turn of progress line, if you pass false, the progress line will be reversed, default value is true.
`startPosition`	double	`0` (`StartPosition.topCenter`)	Start position of progress line relative to the topCenter, you can pass a value from [StartPosition] class or custom double value you need.
`strokeAlign`	SquareStrokeAlign	`SquareStrokeAlign.inside`	The stroke align of the progress line, pass a value from [SquareStrokeAlign] and read it's documents. see: https://api.flutter.dev/flutter/painting/BorderSide/strokeAlign.html
`strokeCap`	StrokeCap?	`StrokeCap.round`	The stroke cap of the progress line and empty line, see: https://api.flutter.dev/flutter/dart-ui/StrokeCap.html
`child`	Widget?	`null`	The child widget, it can be a text or everything you need.

Feel free to create issue or pull requests in github repository!