ken_burns_slideshow

Build Build

A Flutter library for creating Ken Burns effect slideshows.

This library provides a set of widgets and animations to create Ken Burns effect slideshows in Flutter applications.

Demo

If you find this widget useful, consider supporting the developer by buying them a coffee.

Buy Me A Coffee

Installation

Add the following line to your pubspec.yaml file:

ken_burns_slideshow: $latest_version

The latest version of the package is Build

Usage

Firstly, import in dart code:

import 'package:ken_burns_slideshow/ken_burns_slideshow.dart';

To use the ken_burns_slideshow, follow these steps:

  1. Make sure to have a fixed height parent widget.

  2. Within your Flutter widget tree, simply add the KenBurnsSlideshow widget.

KenBurnsSlideshow.asset(
  background: Colors.black,
  foreground: Colors.black38,
  images: const [
    'assets/images/1.jpg',
    'assets/images/2.jpg',
    'assets/images/3.jpg',
    'assets/images/4.jpg',
    'assets/images/5.jpg',
  ],
)

Image Sources

KenBurnsSlideshow supports different image sources.

  • KenBurnsSlideshow.asset
  • KenBurnsSlideshow.network
  • KenBurnsSlideshow.memory
  • KenBurnsSlideshow.cachedNetwork

Animation Sequence

KenBurnsSlideshow receives List<KenBurnsAnimation> as parameter named animationSequence where you can pass your animation sequence. Animations will be iterated from the passed list.

Pre-Defined & Custom Animations

You can create custom animations using KenBurnsAnimation class.

var myAnimation = KenBurnsAnimation(
  scaleBegin: 1,
  scaleEnd: 1.3,
  translateXBegin: 0,
  translateXEnd: -0.15,
)

However, KenBurnsSlideshow comes with some pre-defined animations:

  • topToBottom
  • bottomToTop
  • leftToRight
  • rightToLeft
  • zoomIn
  • zoomOut
  • zoomInLeft
  • zoomInRight

For more Information about the Classes, Enums, Functions etc, visit API Reference.

Libraries

ken_burns_slideshow
A Flutter library for creating Ken Burns effect slideshows.