{"id":32298214,"url":"https://github.com/thomasssb1/title_carousel","last_synced_at":"2026-05-09T02:18:23.751Z","repository":{"id":213324363,"uuid":"733664060","full_name":"Thomasssb1/title_carousel","owner":"Thomasssb1","description":"An image carousel component which also has custom text properties.","archived":false,"fork":false,"pushed_at":"2024-02-18T17:05:44.000Z","size":333,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T04:53:35.943Z","etag":null,"topics":["dart","flutter","image-carousel","pub","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/title_carousel/versions","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Thomasssb1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-19T21:00:26.000Z","updated_at":"2024-11-28T18:54:12.000Z","dependencies_parsed_at":"2023-12-24T02:19:51.306Z","dependency_job_id":"127c484f-8346-4b0a-9e91-d5c1f91219e0","html_url":"https://github.com/Thomasssb1/title_carousel","commit_stats":null,"previous_names":["thomasssb1/title_carousel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Thomasssb1/title_carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thomasssb1%2Ftitle_carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thomasssb1%2Ftitle_carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thomasssb1%2Ftitle_carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thomasssb1%2Ftitle_carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Thomasssb1","download_url":"https://codeload.github.com/Thomasssb1/title_carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Thomasssb1%2Ftitle_carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280563521,"owners_count":26351730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","image-carousel","pub","widget"],"created_at":"2025-10-23T04:53:31.459Z","updated_at":"2025-10-23T04:53:41.901Z","avatar_url":"https://github.com/Thomasssb1.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"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.\n\n\u003c!--\n## Features\nA unique feature of this component is that you can allow the text that is displayed on the image to have its colour changed based off pixel luminance where it will be written.\nTODO: add an image showing how it works as well as the calculation behind it\n--\u003e\n\n## Installation\n\nTo get started, you will need to add the following in the `pubspec.yaml` of your flutter project\n\n```yaml\ndependencies:\n  flutter:\n    sdk:\n  title_carousel: any\n```\n\nImport the package like so\n\n```dart\nimport 'package:title_carousel/title_carousel.dart';\n```\n\n## Usage\n\nTo 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.\n\n```dart\nTitleCarousel(\n  images: [\n    CarouselImage(image: \"https://source.unsplash.com/b027q9eF3Yo.jpeg\"),\n    CarouselImage(image: \"https://source.unsplash.com/6L-b2EmQ4gk.jpeg\"),\n    CarouselImage(image: \"https://source.unsplash.com/6L-b2EmQ4gk.jpeg\")\n  ]\n)\n```\n\nThis will create a simple image carousel with all default values - switching between the 3 images cyclically.\n\n---\n\nTo add text to your image - you need to pass the `TextProperties` class to the corresponding overlay within your `CarouselImage`.\n\n```dart\nCarouselImage(\n  image: \"https://source.unsplash.com/b027q9eF3Yo.jpeg\",\n  titleOverlay: TextProperties(title: \"Swan\\n\", computeLuminance: true),\n  childrenTextOverlay: [\n    TextProperties(\"An elegant swan swimming in the lake\", computeLuminance: true)\n  ]\n)\n```\n\nFor 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.\nThis class also contains the same attributes as a `Text` object - so you can customise the text however you like.\u003cbr\u003e\u003cbr\u003e\n\n#### Want to customise the indicator dots shown on the carousel?\n\n`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!\u003cbr\u003e\n\n#### Getting the current image at any given time\n\nTo 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`\n\n```dart\n  GlobalKey\u003cTitleCarouselState\u003e carouselKey = GlobalKey();\n  ...\n  TitleCarousel(key: carouselKey)\n  ...\n  String getCurrentImage() {\n    CarouselImage image = carouselKey.currentState.getCurrentImage();\n    return image.image;\n  }\n```\n\n## Example\n\nYou 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`.\u003cbr\u003e\nYou can see more [here](https://github.com/Thomasssb1/title_carousel/blob/master/example/README.md).\n\n\nSomething 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.\n\n\u003c!--\n## Additional information\nWant to see it in action? I used it in my own [app]()\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasssb1%2Ftitle_carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasssb1%2Ftitle_carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasssb1%2Ftitle_carousel/lists"}