title_carousel 1.0.1 title_carousel: ^1.0.1 copied to clipboard
An image carousel which allows for title text to be overlaid on top with custom properties.
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!\n\n
Something to note though, 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.