Flutter : How to make every card unique using Listview.builder?

Question

This is the code I have written in my home.dart file.

SliverToBoxAdapter(
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: 245,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount:10,
                      itemBuilder: (context, index) {
                        return VideoCard(long: true);
                      }
                    ),
                  ),
                ),

This is the VideoCard() class

class VideoCard extends material.StatelessWidget {
  final bool long;
  const VideoCard({
    @material.required this.long,
    material.Key key,
  }) : super(key: key);

  @override
  material.Widget build(material.BuildContext context) {
    return material.Padding(
      padding: const material.EdgeInsets.all(10.0),
      child: CardWidget(
        gradient: false,
        button: true,
        width: long ? 360 : 180,
        child: material.Column(
          mainAxisAlignment: material.MainAxisAlignment.start,
          children: <material.Widget>[
            material.Container(
              width: long ? 360 : 180,
              height: 90,
              decoration: material.BoxDecoration(
                image: material.DecorationImage(
                    image: material.AssetImage('assets/images/bitcoin.png'),
                    fit: material.BoxFit.contain),
                borderRadius: material.BorderRadius.only(
                  topLeft: material.Radius.circular(10),
                  topRight: material.Radius.circular(10),
                ),
              ),
              child: material.Text(""),
            ),
            material.Padding(
              padding: const material.EdgeInsets.all(8.0),
              child: material.Text(
                "BITCOIN - A pioneer in Crypto!",
                overflow: material.TextOverflow.ellipsis,
                maxLines: 2,
                style: material.TextStyle(
                    color: material.Colors.white,
                    fontFamily: 'Red Hat Display',
                    backgroundColor: material.Colors.black,
                    fontSize: 16),
              ),
            ),
            material.Padding(
              padding: const material.EdgeInsets.symmetric(horizontal: 8.0),
              child: material.Row(
                children: <material.Widget>[
                  material.Icon(BoxIcons.bx_bar_chart_alt_2, size: 16),
                  material.Text(
                    "Beginner",
                    style: material.TextStyle(
                        color: material.Color(0xFFADADAD),
                        fontFamily: 'Red Hat Display',
                        fontSize: 10),
                  ),
                  material.Spacer(),
                  material.Text(
                    "10 mins",
                    style: material.TextStyle(
                        color: material.Color(0xFFADADAD),
                        fontFamily: 'Red Hat Display',
                        fontSize: 10),
                  ),
                  material.Icon(BoxIcons.bx_timer, size: 16),
                ],
              ),
            ),
            material.Spacer(),
            material.Padding(
              padding: const material.EdgeInsets.only(top: 6.0),
              child: material.GestureDetector(
                child: material.Container(
                  padding: material.EdgeInsets.fromLTRB(0, 14, 0, 14),
                  decoration: material.BoxDecoration(gradient: Colors().waves),
                  child: material.Row(
                    mainAxisAlignment: material.MainAxisAlignment.spaceEvenly,
                    children: <material.Widget>[
                      material.Icon(BoxIcons.bx_play_circle,
                          color: material.Colors.black),
                      material.Text(
                        "Learn it",
                        style: material.TextStyle(
                            color: material.Colors.black,
                            fontFamily: 'Red Hat Display',
                            fontSize: 18),
                      )
                    ],
                  ),
                ),
                onTap: () {
                  material.Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: (context) => VideoPage(),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is the result I got.

But I want unique text,image for every card(list). The dedign for every list should be same. But text,image,onTap() gesture should be different for every card(list). Is my logic is wrong? Any answer is appreciated!

Answer 1

You can pass parameters to the constructor of VideoCard like VideoCard(text: textFromListView, image: imageFromListView) . In VideoPage you can do like this as well like VideoPage(text: textFromVideoCard, imaeg: imageFromVideoCard);

In VideoCard onTap() you can do like

onTap: () {
    material.Navigator.push(
    context,
    CupertinoPageRoute(
    builder: (context) => VideoPage(text: textFromVideoCard, image: imageFromVideoCard),
    ),
   );
},

Then in VideoPage you can access to text and image that you want to. Happy coding.

Answer 2

You've hard coded the text, image and onTap. You should pass the data from the map or list and use [index] to tell your code that card with index 0 in the list, should use text with index 0, and card with index 1, should use text with index 1.

If the items in your list will not change, and you want to hardcode them, you can do that without .builder . You can simply use ListView widget. You can also use Row and/or Column widgets.

ListView(
    child: Column(
      children[
       Card(),
       Card(),
       Card()
     ]))

If you want a two column design, create two Columns or ListView inside a Row widget.