Scrollable Titled Image Cards

A Flutter package for scrolling image and custom card overlays.

Getting started

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

dependencies:
  scrollable_titled_image_cards: ^0.0.1

2. Install it from the command line:

$ flutter pub get

3. Import it in your project:

import 'package:scrollable_titled_image_cards/scrollable_titled_image_cards.dart';

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),
            ),
          ),
        )
      ],
    ),
  ],
)

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');
  },
),

Classes, Parameters, and Overlay Options

Class: ScrollableTitledImageCards

Overlay Options: