https://github.com/thomasssb1/title_carousel
An image carousel component which also has custom text properties.
https://github.com/thomasssb1/title_carousel
dart flutter image-carousel pub widget
Last synced: about 1 month ago
JSON representation
An image carousel component which also has custom text properties.
- Host: GitHub
- URL: https://github.com/thomasssb1/title_carousel
- Owner: Thomasssb1
- License: apache-2.0
- Created: 2023-12-19T21:00:26.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-18T17:05:44.000Z (over 2 years ago)
- Last Synced: 2025-10-23T04:53:35.943Z (8 months ago)
- Topics: dart, flutter, image-carousel, pub, widget
- Language: C++
- Homepage: https://pub.dev/packages/title_carousel/versions
- Size: 325 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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
```yaml
dependencies:
flutter:
sdk:
title_carousel: any
```
Import the package like so
```dart
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.
```dart
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`.
```dart
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`
```dart
GlobalKey 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`.
You can see more [here](https://github.com/Thomasssb1/title_carousel/blob/master/example/README.md).
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.