How to Display Particulate range of data from list in Listview.builder in Flutter?-CodePudding

I want to Display data from index 1 to 3 only in Listview.builder so how i can do this?

Container(
              padding: EdgeInsets.fromLTRB(0, 0, 0, Constants.APP_PADDING),
              height: 225,
              child: ListView.builder(
                itemBuilder: popularPlanItemBuilder,
                scrollDirection: Axis.horizontal,
                itemCount: _imageList.length,
              ),

Widget popularPlanItemBuilder(BuildContext context, int index) {
    ImageModel image = _imageList[index];
    return Padding(
      padding: const EdgeInsets.fromLTRB(5, 5, 0, 5),
      child: Container(
        alignment: Alignment.center,
        child: Container(
          child: Card(
            child: Container(
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(18),
                child: Image.network(
                  "$imageUrl"   image.imgPath!,
                  width: MediaQuery.of(context).size.width - 40,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            elevation: 8,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
          ),
        ),
      ),
    );
  }
            ),

As above I get all the image data from the list, but i want only data of index 1 to 3 so how i can do this?

CodePudding user response：

Try this answer :

Container(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, Constants.APP_PADDING),
                  height: 225,
                  child: ListView.builder(
                    itemBuilder: popularPlanItemBuilder,
                    scrollDirection: Axis.horizontal,
                    itemCount: 2,
                  ),

Widget popularPlanItemBuilder(BuildContext context, int index) {
    ImageModel image = _imageList[index];
    return Padding(
      padding: const EdgeInsets.fromLTRB(5, 5, 0, 5),
      child: Container(
        alignment: Alignment.center,
        child: Container(
          child: Card(
            child: Container(
              alignment: Alignment.center,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(18),
                child: Image.network(
                  "$imageUrl"   image.imgPath!,
                  width: MediaQuery.of(context).size.width - 40,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            elevation: 8,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
          ),
        ),
      ),
    );
  }
            ),

CodePudding user response：

By reducing the itemCount and checking index on itemBuilder

itemCount: data.length < 4 ? data.length : 4,
itemBuilder: (context, index) {
  if (index >= 1 && index <= 3) {
    return Text(data[index].toString()); //item builder
  } else
    return SizedBox();
},