image_card_list 1.0.1
image_card_list: ^1.0.1 copied to clipboard

Flutter Android iOS Linux macOS web Windows

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,
          );
5
likes
100
pub points
52%
popularity

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.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

sangamyadav76@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on image_card_list