scrollable_titled_image_cards

Description:

scrollable titled image cards

Scrollable Titled Image Cards #
A Flutter package for scrolling image and custom card overlays.
Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
scrollable_titled_image_cards: ^0.0.1
copied to clipboard

Install it from the command line:

$ flutter pub get
copied to clipboard

Import it in your project:

import 'package:scrollable_titled_image_cards/scrollable_titled_image_cards.dart';
copied to clipboard
Usage #
ScrollableTitledImageCards is a Stateless Widget which you can include in your widget tree. You can use it either vertically or horizontally by overriding the scrollDirection property (scrollDirection = Axis.vertical by default).
The clickable overlays within ScrollableTitledImageCards are Stateful Widgets. Check the examples and lib/src/clickable_overlays for the specifics on clickable overlays and how to customize them.
Horizontal scroll view #
ScrollableTitledImageCards(
scrollDirection: Axis.horizontal,
imagesList: imagesList,
width: 250,
height: 350,
onTap: (index) {
log('$index pressed');
},
),
ScrollableTitledImageCards(
scrollDirection: Axis.horizontal,
imagesList: imagesList,
width: 250,
height: 350,
onTap: (index) {
log('$index pressed');
},
overlays: [
for (var title in titlesList)
// this will be a stack element on top of the image - customize however you want or use one of the overlays or clickable overlays available
Container(
color: Colors.black.withOpacity(0.6),
constraints: const BoxConstraints.expand(),
child: Center(
child: Text(
title,
style: const TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
)
],
),
],
)
copied to clipboard
Vertical scroll view #
You can customize the card overlays according to your preferences by overriding the overlays property. However, ensure that the lengths of imageList and overlays are equal.
ScrollableTitledImageCards(
imagesList: imagesList,
width: double.infinity,
height: 190,
onTap: (index) {
log('$index pressed');
},
),
copied to clipboard
Classes, Parameters, and Overlay Options #
Class: ScrollableTitledImageCards #



Parameter
Description




imagesList (Required)
A list of strings representing image paths or URLs for the cards.


scrollDirection (Optional, defaults to Axis.vertical)
The scrolling direction of the cards. Can be either Axis.horizontal or Axis.vertical.


width (Optional)
The width of each card.


height (Optional)
The height of each card.


margin (Optional)
The margin applied to each card.


borderRadius (Optional)
The border radius applied to each card.


overlays (Optional)
A list of widgets to be displayed as overlays on top of the images. The length of this list must match the length of imagesList.


onTap (Optional)
A callback function that is triggered when a card is tapped. The function receives the index of the tapped card as a parameter.



Overlay Options: #



Overlay
Description




TitleOverlay
Customizable widget for displaying a title with specific styles over a semi-transparent background overlay.


TitleSubtitleOverlay
Customizable widget that displays a title and subtitle with specific styles over a semi-transparent background overlay.


TitleSubtitleDescriptionOverlay
Customizable widget that displays a title, subtitle, and description with specific styles over a semi-transparent background overlay.


TitleDescriptionOverlay
Customizable widget that displays a title and description with specific styles over a semi-transparent background overlay.


DescriptionOverlay
Customizable widget that displays a description with specific styles over a semi-transparent background overlay.


ClickableDescriptionOverlay
A stateful widget that toggles the visibility of an overlay containing a description text when tapped.


ClickableTitleDescriptionOverlay
A stateful widget that toggles the visibility of an overlay containing a title and description text when tapped.


ClickableTitleSubtitleOverlay
A stateful widget that toggles the visibility of an overlay containing a title and subtitle text when tapped.


ClickableTitleSubtitleDescriptionOverlay
A stateful widget that toggles the visibility of an overlay containing a title, subtitle, and description when tapped.