image_card_list 1.0.1

Make a scrollable list of image cards with less boilerplate code. Quick, dynamic and reusable. Use images from assets and network simultaneously to form the widget.

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