A scrollable list of image cards with less boilerplate code. Quick, dynamic 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,
            onTap: (name, image) {
              //some code..
            },
        ),
    );
  }
}

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

Libraries

image_card_list