Flutter

In this guide, we will demonstrate how to use Lordicon icons within a Flutter application. To streamline the entire process, we have prepared a player for you, making the integration significantly easier. The integration we present here is compatible with web and native environments.

We love open-source, and whenever possible, we strive to give back to the community. The player we've prepared is available for free as part of the pub.dev package. Additionally, we provide a repository with the complete source code.

To make use of the player, you first need to install it:

flutter pub add lordicon

Next, in the code, we embed the IconViewer widget and IconController:

import 'package:flutter/material.dart';
import 'package:lordicon/lordicon.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var controller = IconController.assets('assets/lock.json');

    controller.addStatusListener((status) {
      if (status == ControllerStatus.ready) {
        controller.playFromBeginning();
      }
    });

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: IconViewer(
            controller: controller,
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

Simple usage

Click to see a seamless integration of the player with a Flutter app directly in your browser.

Using the IconViewer widget, we specify where the icon should be displayed. IconViewer supports the following parameters:

Name	Description
controller	A mandatory controller responsible for animating the icon.
colorize	The option to replace colors with specified values.
width	Icon width.
height	Icon height.

The IconController allows for animation control, with the following supported methods:

Name	Description
IconController.assets(name, state, direction)	Loads a file stored in the application's assets. State and direction are optional.
IconController.network(url, state, direction)	Loads a file from the network. State and direction are optional.
addStatusListener(listener)	Assigns a listener for status.
removeStatusListener(listener)	Stops listening for status.
clearStatusListeners()	Clears all listeners.
play()	Play the animation.
playFromBeginning()	Play the animation from the beginning.
pause()	Pause the animation.
goToFirstFrame()	Go to the first animation frame.
goToLastFrame()	Go to the last animation frame.

List of supported properties for IconController:

Name	Description
state	Access to the current state.
direction	Animation playback direction, which can be either 1 or -1.
isReady	Indicates whether the player is ready.
isPlaying	Indicates whether the player is currently playing the animation.

Sample app

Sample app with Lordicon integration.

Show

While we expect minimal issues, there is no guarantee of 100% CDN uptime. If your project is of paramount importance to your clients, we suggest you consider hosting icons as Lottie JSON (Lordicon) on your own.

If you're not using multiple animations or strokes within a single icon in your project, consider using the 'minify' option when downloading its JSON. This will result in a smaller file that loads faster for users.

Was this article helpful?

Usage

Simple usage

API

Examples

Best practices

Icon hosting

Minify