DOCSEARCHbyAlgolia
Submit Docs

flutter_spinkit

repository·master·Indexed 25 days ago

https://github.com/jogboms/flutter_spinkit

A collection of animated loading indicators for Flutter applications inspired by Tobias Ahlin's SpinKit. The library provides various widgets such as SpinKitRotatingCircle, SpinKitFadingCircle, SpinKitChasingDots, SpinKitCircle, SpinKitPianoWave, SpinKitPumpingHeart, SpinKitRing, SpinKitSpinningLines, SpinKitWaveSpinner, and SpinKitWave. Most indicators support customization of color, size, duration, and AnimationController, with some offering an itemBuilder for custom widget rendering.

Tokens
2.4K
Snippets
5
Records
17
Agent score
85%

What's inside flutter_spinkit

  2. Use SpinKit loading indicators

    master

    You can use various SpinKit widgets to display animated loading indicators. Most widgets accept color and size properties. Some widgets also support an itemBuilder for custom styling or a controller for manual animation control.

    Basic usage with color and size

    const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);

    Customizing items with itemBuilder

    Some indicators allow you to define how individual items are built:

    final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);

    Using a custom AnimationController

    For fine-grained control over the animation, you can provide your own AnimationController:

    final spinkit = SpinKitSquareCircle(
  color: Colors.white,
  size: 50.0,
  controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

  5. Customize SpinKitWave items with itemBuilder

    master

    If you want to use something other than simple colored boxes for the wave items, use the itemBuilder property. This allows you to return any widget for each index in the wave.

    Note: When using itemBuilder, do not provide a color property, as this will trigger an assertion error.

  6. Configure SpinKitWaveSpinner properties

    master

    The SpinKitWaveSpinner constructor accepts the following parameters:

    ParameterTypeDefaultDescription
    colorColorRequiredThe color of the moving arc.
    trackColorColorColor(0x68757575)The color of the background track.
    waveColorColorColor(0x68757575)The color of the wave effect.
    sizedouble50The overall size of the spinner.
    durationDurationDuration(milliseconds: 3000)The duration of the animation cycle.
    curveCurveCurves.decelerateThe animation curve used.
    childWidget?nullAn optional widget to display in the center.
    controllerAnimationController?nullAn optional external controller to manage the animation.

  7. Use the SpinKitWave loading indicator

    master

    The SpinKitWave widget displays a wave-like loading animation consisting of multiple items. You must provide either a color or an itemBuilder to define how the items look.

    Parameters

    • color (Color?): The color of the wave items. Required if itemBuilder is null.
    • itemCount (int): The number of items in the wave. Must be at least 2. Defaults to 5.
    • size (double): The base size of the indicator. Defaults to 50.0.
    • type (SpinKitWaveType): Determines the direction/pattern of the wave animation. Defaults to SpinKitWaveType.start.
    • duration (Duration): The duration of the animation cycle. Defaults to 1200 milliseconds.
    • itemBuilder (IndexedWidgetBuilder?): A builder function to create custom widgets for each item in the wave. If provided, color is ignored.
    • controller (AnimationController?): An optional external controller to manage the animation state.

  8. Use the SpinKitPianoWave loading indicator

    master

    The SpinKitPianoWave widget displays a piano-wave style loading animation. You must provide either a color or an itemBuilder to define how the individual bars look.

    Parameters

    • color (Color?): The color of the bars if using the default itemBuilder.
    • itemCount (int): The number of bars in the animation. Must be at least 2. Defaults to 5.
    • size (double): The base size of the indicator. Defaults to 50.0.
    • duration (Duration): The duration of the animation cycle. Defaults to 1200 milliseconds.
    • type (SpinKitPianoWaveType): Determines the direction/pattern of the wave. Options are start, end, or center.
    • itemBuilder (IndexedWidgetBuilder?): A builder function to create custom widgets for each bar. If provided, the color parameter is ignored.
    • controller (AnimationController?): An optional external controller to manage the animation state.

  9. Use the SpinKitRing loading indicator

    master

    The SpinKitRing widget displays a circular loading animation. You can customize its appearance using the following parameters:

    • color: The color of the ring (required).
    • lineWidth: The thickness of the ring stroke. Defaults to 7.0.
    • size: The diameter of the indicator. Defaults to 50.0.
    • duration: The duration of one animation cycle. Defaults to Duration(milliseconds: 1200).
    • controller: An optional AnimationController to manage the animation manually. If provided, the widget will use your controller instead of creating its own.

  10. Use the SpinKitChasingDots loading indicator

    master

    The SpinKitChasingDots widget provides a loading animation of chasing dots. You can customize its appearance using either a color or a custom itemBuilder to define how each dot is rendered.

    Constraints:

    • You must specify either an itemBuilder or a color. You cannot leave both null.
    • If you provide an itemBuilder that is an IndexedWidgetBuilder, you should not also provide a color.

    Properties:

    • color: The color of the dots (used if itemBuilder is null).
    • size: The total size of the widget (defaults to 50.0).
    • itemBuilder: A builder function to customize the dots. It receives the BuildContext and the dot index (0 or 1).
    • duration: The duration of the animation cycle (defaults to 2000 milliseconds).

  11. Configure SpinKitPumpingHeart properties

    master

    The SpinKitPumpingHeart widget accepts the following configuration properties:

    PropertyTypeDescription
    colorColor?The color of the heart icon (used if itemBuilder is null).
    sizedoubleThe size of the heart icon. Defaults to 50.0.
    itemBuilderIndexedWidgetBuilder?A builder that returns a custom widget to be animated. If provided, color is ignored.
    durationDurationThe duration of one animation cycle. Defaults to Duration(milliseconds: 2400).
    controllerAnimationController?An external controller to manage the animation. If provided, the widget will not create its own controller and will not dispose of it.

  12. Configure SpinKitPianoWaveType animation patterns

    master

    The SpinKitPianoWaveType enum allows you to control the animation flow of the piano wave:

    • SpinKitPianoWaveType.start: Animation starts from one side.
    • SpinKitPianoWaveType.end: Animation starts from the opposite side.
    • SpinKitPianoWaveType.center: Animation radiates from the center.
    enum SpinKitPianoWaveType { start, end, center }