flutterimagegridplaceholdercover

How to create a placeholder has grid images in Flutter

Help, i want to create a thumbnail for each playlist in flutter. It will has 4 images with a grid layout like this. Those images are cover art of the playlist's child songs.

I have search through the internet for hours but didn't find any guide or keyword to do this. Can someone help me with some hints or any keywords? I appreciate any helps.

An example of what i want to achieve

Solution

  • Here's a PlaylistThumbnail widget that uses a GridView.builder to organize images in a 2x2 grid format. Each grid cell contains an image, loaded from a specified URL. With this widget you can integrate it into any part of your application.

    class PlaylistThumbnail extends StatelessWidget { final List imageUrls;

      PlaylistThumbnail({Key? key, required this.imageUrls}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: GridView.builder(
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return Image.network(
            imageUrls[index],
            fit: BoxFit.contain,
          );
        },
      ),
    );
  }
}

    Implementation:

    PlaylistThumbnail(
    imageUrls: [
        'https://mir-s3-cdn-cf.behance.net/project_modules/1400/fe529a64193929.5aca8500ba9ab.jpg',
        'https://static1.squarespace.com/static/56454c01e4b0177ad4141742/56f3eeaa6e06f2df013dd6cd/56f3ef166e06f2df013de90c/1458827030375/Covers-Vol.-1-Cover.jpg',
        'https://i.scdn.co/image/ab67616d0000b273f6b8d7be25fdb2232048c527',
        'https://cdn.venngage.com/template/thumbnail/small/bf008bfe-9bf6-4511-b795-e86f070bfff5.webp',
     ], 
)

    Here is the rendering.enter image description here