Flutter image carousel component which can be used to create multiple rotating images within a single component using either network or local images. This carousel can also add text overlay along with automatically determined text colour based on the image brightness.
Installation
To get started, you will need to add the following in the pubspec.yaml
of your flutter project
dependencies:
flutter:
sdk:
title_carousel: any
Import the package like so
import 'package:title_carousel/title_carousel.dart';
Usage
To add a TitleCarousel
to your project, you can use the widget like normal in your widget tree with the images supplied using the CarouselImage
class.
TitleCarousel(
images: [
CarouselImage(image: "https://source.unsplash.com/b027q9eF3Yo.jpeg"),
CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg"),
CarouselImage(image: "https://source.unsplash.com/6L-b2EmQ4gk.jpeg")
]
)
This will create a simple image carousel with all default values - switching between the 3 images cyclically.
To add text to your image - you need to pass the TextProperties
class to the corresponding overlay within your CarouselImage
.
CarouselImage(
image: "https://source.unsplash.com/b027q9eF3Yo.jpeg",
titleOverlay: TextProperties(title: "Swan\n", computeLuminance: true),
childrenTextOverlay: [
TextProperties("An elegant swan swimming in the lake", computeLuminance: true)
]
)
For each TextProperties
object you can use luminance to influence the text colour used by setting computeLuminance
to true. You can also customise the colours used by changing the brightColor
and darkColor
attributes.
This class also contains the same attributes as a Text
object - so you can customise the text however you like.
Want to customise the indicator dots shown on the carousel?
TitleCarousel
takes the dotDecoration
argument which allows for you to style the indicator however you like - you can even change the selectedColor
to any color for when the current dot is active!
Getting the current image at any given time
To get the currently displayed image of a TitleCarousel
you can assign a key to the widget and retrieve the current state from which you can get the current on display CarouselImage
GlobalKey<TitleCarouselState> carouselKey = GlobalKey();
...
TitleCarousel(key: carouselKey)
...
String getCurrentImage() {
CarouselImage image = carouselKey.currentState.getCurrentImage();
return image.image;
}
Example
You can view an example under the examples/
directory, which is a flutter app showing the functionality of both non-luminous calculation and luminous calculation for text colour. The non-luminous example shows a set of pre-determined networked images whilst the luminous example will fetch random images from unsplash. To try the luminous example, you will need to add your unsplash accessToken
to the variable inside of examples/lib/luminance.dart
.
Something to note, is that because the colours you can pass is binary as it is based off luminosity - it may not always be as effective as using something like K-means to determine the most dominant colour but this will give you the best colour based on the brightness at that location.