A Material Design linear progress indicator, also known as a progress bar.
A widget that shows progress along a line. There are two kinds of linear progress indicators:
- Determinate. Determinate progress indicators have a specific value at each point in time, and the value should increase monotonically from 0.0 to 1.0, at which time the indicator is complete. To create a determinate progress indicator, use a non-null value between 0.0 and 1.0.
- Indeterminate. Indeterminate progress indicators do not have a specific value at each point in time and instead indicate that progress is being made without indicating how much progress remains. To create an indeterminate progress indicator, use a null value.
The indicator line is displayed with valueColor, an animated value. To
specify a constant color value use: AlwaysStoppedAnimation<Color>(color).
The minimum height of the indicator can be specified using minHeight. The indicator can be made taller by wrapping the widget with a SizedBox.
To create a local project with this code sample, run:
flutter create --sample=material.LinearProgressIndicator.1 mysample
To create a local project with this code sample, run:
flutter create --sample=material.LinearProgressIndicator.2 mysample
Animation synchronization
When multiple CircularProgressIndicators or LinearProgressIndicators are animating on screen simultaneously (e.g., in a list of loading items), their uncoordinated animations can appear visually cluttered. To address this, the animation of an indicator can be driven by a custom AnimationController.
This allows multiple indicators to be synchronized to a single animation source. The most convenient way to achieve this for a group of indicators is by providing a controller via ProgressIndicatorTheme (see ProgressIndicatorThemeData.controller). All CircularProgressIndicators or LinearProgressIndicators within that theme's subtree will then share the same animation, resulting in a more coordinated and visually pleasing effect.
Alternatively, a specific AnimationController can be passed directly to the controller property of an individual indicator.
See the documentation of CircularProgressIndicator for an example on this topic.
See also:
- CircularProgressIndicator, which shows progress along a circular arc.
- RefreshIndicator, which automatically displays a CircularProgressIndicator when the underlying vertical scrollable is overscrolled.
- material.io/design/components/progress-indicators.html#linear-progress-indicators
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- ProgressIndicator
- LinearProgressIndicator
Constructors
-
LinearProgressIndicator({Key? key, double? value, Color? backgroundColor, Color? color, Animation<
Color?> ? valueColor, double? minHeight, String? semanticsLabel, String? semanticsValue, BorderRadiusGeometry? borderRadius, Color? stopIndicatorColor, double? stopIndicatorRadius, double? trackGap, @Deprecated('Set this flag to false to opt into the 2024 progress indicator appearance. Defaults to true. ' 'In the future, this flag will default to false. Use ProgressIndicatorThemeData to customize individual properties. ' 'This feature was deprecated after v3.26.0-0.1.pre.') bool? year2023, AnimationController? controller}) -
Creates a linear progress indicator.
const
Properties
- backgroundColor → Color?
-
Color of the track being filled by the linear indicator.
no setteroverride
- borderRadius → BorderRadiusGeometry?
-
The border radius of both the indicator and the track.
final
- color → Color?
-
The progress indicator's color.
finalinherited
- controller → AnimationController?
-
An optional AnimationController that controls the animation of this
indeterminate progress indicator.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- minHeight → double?
-
The minimum height of the line used to draw the linear indicator.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- semanticsLabel → String?
-
The SemanticsProperties.label for this progress indicator.
finalinherited
- semanticsValue → String?
-
The SemanticsProperties.value for this progress indicator.
finalinherited
- stopIndicatorColor → Color?
-
The color of the stop indicator.
final
- stopIndicatorRadius → double?
-
The radius of the stop indicator.
final
- trackGap → double?
-
The gap between the indicator and the track.
final
- value → double?
-
If non-null, the value of this progress indicator.
finalinherited
-
valueColor
→ Animation<
Color?> ? -
The progress indicator's color as an animated value.
finalinherited
- year2023 → bool?
-
When true, the LinearProgressIndicator will use the 2023 Material Design 3
appearance.
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< LinearProgressIndicator> -
Creates the mutable state for this widget at a given location in the tree.
override
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Constants
- defaultAnimationDuration → const Duration
- The default duration for one full cycle of the indeterminate animation.