A scrollable list of image cards with less boilerplate code. Quick, static and reusable.

By using ImageCardList instead of manually creating such list, you get:

  • A scrollable list of pictures in a single step.
  • More readable and reusable code structure.
  • A largely reduced boilerplate.
  • Easy integration.
  • Flexibility over changing a lot of properties.

Mechanism

A SingleChildScrollView wrapped around Row/Column widget with a list of Cards containing AssetImage and a Text widget.

Check

image_card_list documentation.

Usage

  • Add dependency
dependencies:
  ...
  image_card_list: //[version]
  • Use assets/network images all together.
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: ImageCardList(
            map: {
              "Tiger": "assets/tiger.jpg",
              "Wolf": "https://i.ibb.co/Gp8xvsx/images-15.jpg",
              "Leopard": "assets/leopard.jpeg",
              "Zebra": "assets/zebra.jpg",
              "Giraffe": "assets/giraffe.jpeg",
              "Bear": "assets/bear.jpeg",
              "Monkey": "assets/monkey.jpeg"
            },
            displayNameTag: true,
          ),
    );
  }
}

Therefore, the widget is smart enough to know whether an image is being used from assets or http. The 'displayNameTag' property is mandatory so as to show/hide the nameTag and to provide unique identification to each image in use.

Breakdown

  • Adding an image from asset.
ImageCardList(
            map: {
              "Tiger": "assets/tiger.jpg",
            },
            displayNameTag: true,
          );
  • Adding an image from network.
ImageCardList(
            map: {
              "Wolf": "https://i.ibb.co/Gp8xvsx/images-15.jpg",
            },
            displayNameTag: true,
          );

NOTE:

With initial release it wont be easy or possible to have full control over the cards, especially when working with animations and displaying explicit information on Tap events. However, future changes will bring significant improvements.

Libraries

image_card_list