Properties

Configure your DotLottieView widget with these properties.

Required Properties

Property	Type	Description
`source`	`String`	The source of the animation (URL, asset path, or JSON string)
`sourceType`	`String`	Type of source: `'url'`, `'asset'`, or `'json'`

Example

Loading via URL

DotLottieView(
  sourceType: 'url',
  source: 'https://lottie.host/your-animation.lottie',
)

Loading via asset

DotLottieView(
  sourceType: 'asset',
  source: 'your-animation.json / your-animation.lottie',
)

Loading via JSON

DotLottieView(
  sourceType: 'json',
  source: '{"nm":"Creator_Anchor Point","ddd":0..',
)

Playback Properties

Control how the animation plays.

Property	Type	Default	Description
`autoplay`	`bool`	`false`	Whether the animation should start playing automatically
`loop`	`bool`	`false`	Whether the animation should loop indefinitely
`loopCount`	`int?`	`null`	Number of times to loop (overrides `loop` if set)
`speed`	`double`	`1.0`	Playback speed multiplier (e.g., `2.0` for double speed)
`mode`	`String?`	`null`	Playback mode: `'forward'`, `'reverse'`, `'bounce'`, or `'reverse-bounce'`
`useFrameInterpolation`	`bool`	`false`	Enable frame interpolation for smoother playback

Example

DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
  speed: 1.5,
  mode: 'bounce',
  useFrameInterpolation: true,
)

Playback Modes

forward: Play from start to end
reverse: Play from end to start
bounce: Play forward, then reverse
reverse-bounce: Play reverse, then forward

Animation Control

Control which part of the animation plays.

Property	Type	Description
`segment`	`List<double>?`	Play a specific segment `[startFrame, endFrame]`
`marker`	`String?`	Play from a named marker defined in the animation
`animationId`	`String?`	ID of a specific animation to play (for multi-animation files)

Example

// Play only frames 30-90
DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  segment: [30, 90],
  autoplay: true,
)

// Play from a marker
DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  marker: 'intro',
  autoplay: true,
)

Visual Properties

Customize the appearance of the animation.

Property	Type	Description
`backgroundColor`	`String?`	Background color in hex format (e.g., `'#FF0000'`)
`width`	`double?`	Canvas width for rendering
`height`	`double?`	Canvas height for rendering

Example

DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  backgroundColor: '#FFFFFF',
  width: 400,
  height: 400,
)

Advanced Properties

Advanced features for complex use cases.

Property	Type	Description
`themeId`	`String?`	ID of a theme to apply to the animation
`stateMachineId`	`String?`	ID of a state machine to load and start automatically

Example

// Apply a theme
DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  themeId: 'darkMode',
  autoplay: true,
)

// Load a state machine
DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  stateMachineId: 'myStateMachine',
)

Complete Example

DotLottieView(
  // Required
  source: 'https://lottie.host/your-animation.lottie',
  sourceType: 'url',

  // Playback
  autoplay: true,
  loop: true,
  speed: 1.5,
  mode: 'bounce',
  useFrameInterpolation: true,

  // Animation control
  segment: [0, 120],

  // Visual
  backgroundColor: '#FFFFFF',
  width: 400,
  height: 400,

  // Advanced
  themeId: 'darkMode',

  // Controller
  onViewCreated: (controller) {
    _controller = controller;
  },
)