List View Builder rebuilds items based on index when scrolled back after pagination.

[KushalPathak]

I have created Listview builder which returns different widgets as per the values I am getting from API response.

First page scroll contains 20 Items which works totally fine, but as soon as the logic of pagination gets called and new Items add into list , when I scroll back the layout is completely changed compare to how it was before.

I am adding full code below so you get the idea what I am trying to do.

HELP NEEDED
Thank You !!! <3

ListView.builder(
             controller: _sc_controller,
             scrollDirection: Axis.vertical,
             //primary: true,
             itemCount: categoryList == null ? 0 : categoryList.length + 1,
             itemBuilder: (BuildContext context, int index) {
               if (index == categoryList.length) {
                 return _buildProgressIndicator();
               } else {
                 {
                   if (index == a) {
                     return Container();
                   } else if (categoryList[index]["image_type"] ==
                       "portrait") {
                     return InkWell(
                       onTap: () {
                         Navigator.push(
                             context,
                             PageTransition(
                                 type: PageTransitionType.fade,
                                 duration: Duration(milliseconds: 400),
                                 child: Product_Page(categoryList[index])));
                       },
                       child: Padding(
                         padding: const EdgeInsets.symmetric(
                             horizontal: 10.0, vertical: 10.0),
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Container(
                               width: MediaQuery.of(context).size.width,
                               color: Theme.of(context).primaryColorLight,
                               child: categoryList[index]["product_image"]
                                           .toString() ==
                                       "null"
                                   ? Image.asset("assets/images/beer.jpeg")
                                   : Image.network(
                                       categoryList[index]["product_image"]
                                           .toString(),
                                       fit: BoxFit.cover,
                                     ),
                             ),
                             Padding(
                               padding: const EdgeInsets.only(top: 15.0),
                               child: Row(
                                 mainAxisAlignment:
                                     MainAxisAlignment.spaceBetween,
                                 children: [
                                   Text(
                                       categoryList[index]["brand_name"]
                                           .toString(),
                                       softWrap: false,
                                       maxLines: 1,
                                       overflow: TextOverflow.ellipsis,
                                       style: TextStyle(
                                           color: Colors.white,
                                           fontFamily: 'Poppines_extlight')),
                                   GestureDetector(
                                     onTap: () {
                                       print("Icon Clicked");
                                     },
                                     child: Icon(
                                       Icons.bookmark_border,
                                       color: Colors.transparent,
                                       size: 20,
                                     ),
                                   ),
                                 ],
                               ),
                             ),
                             Text(
                                 "\u{20B9} " +
                                     categoryList[index]["price"].toString(),
                                 style: TextStyle(
                                     color: Colors.white,
                                     fontFamily: 'Poppines_extlight')),
                           ],
                         ),
                       ),
                     );
                   } else if (categoryList[index]["image_type"] ==
                       "landscape") {
                     return InkWell(
                       onTap: () {
                         Navigator.push(
                             context,
                             PageTransition(
                                 type: PageTransitionType.fade,
                                 duration: Duration(milliseconds: 400),
                                 child: Product_Page(categoryList[index])));
                       },
                       child: Padding(
                         padding: const EdgeInsets.symmetric(
                             horizontal: 10.0, vertical: 10.0),
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Container(
                               width: MediaQuery.of(context).size.width,
                               color: Theme.of(context).primaryColorLight,
                               child: categoryList[index]["product_image"]
                                           .toString() ==
                                       "null"
                                   ? Image.asset("assets/images/beer.jpeg")
                                   : Image.network(
                                       categoryList[index]["product_image"]
                                           .toString(),
                                       fit: BoxFit.cover,
                                     ),
                             ),
                             Padding(
                               padding: const EdgeInsets.only(top: 15.0),
                               child: Row(
                                 mainAxisAlignment:
                                     MainAxisAlignment.spaceBetween,
                                 children: [
                                   Text(
                                       categoryList[index]["brand_name"]
                                           .toString(),
                                       softWrap: false,
                                       maxLines: 1,
                                       overflow: TextOverflow.ellipsis,
                                       style: TextStyle(
                                           color: Colors.white,
                                           fontFamily: 'Poppines_extlight')),
                                   GestureDetector(
                                     onTap: () {
                                       print("Icon Clicked");
                                     },
                                     child: Icon(
                                       Icons.bookmark_border,
                                       color: Colors.transparent,
                                       size: 20,
                                     ),
                                   ),
                                 ],
                               ),
                             ),
                             Text(
                                 "\u{20B9} " +
                                     categoryList[index]["price"].toString(),
                                 style: TextStyle(
                                     color: Colors.white,
                                     fontFamily: 'Poppines_extlight')),
                           ],
                         ),
                       ),
                     );
                   } else if (index < categoryList.length - 1) {
                     if (categoryList[index]["image_type"] == "grid" &&
                         categoryList[index + 1]["image_type"] == "grid") {
                       print(index.toString());
                       index = index + 2;
                       a = index - 1;
                       return Row(
                         mainAxisAlignment: MainAxisAlignment.start,
                         children: [
                           InkWell(
                             onTap: () {
                               Navigator.push(
                                   context,
                                   PageTransition(
                                       type: PageTransitionType.fade,
                                       duration: Duration(milliseconds: 400),
                                       child: Product_Page(
                                           categoryList[index - 2])));
                             },
                             child: Padding(
                               padding:
                                   const EdgeInsets.symmetric(horizontal: 5.0),
                               child: Container(
                                 width:
                                     (MediaQuery.of(context).size.width / 2) -
                                         10,
                                 child: Column(
                                   crossAxisAlignment:
                                       CrossAxisAlignment.start,
                                   children: [
                                     Container(
                                       color:
                                           Theme.of(context).primaryColorLight,
                                       child: Center(
                                         child: categoryList[index - 2]
                                                         ["product_image"]
                                                     .toString() ==
                                                 "null"
                                             ? Image.asset(
                                                 "assets/images/beer.jpeg")
                                             : Image.network(
                                                 categoryList[index - 2]
                                                         ["product_image"]
                                                     .toString(),
                                                 fit: BoxFit.fitWidth,
                                               ),
                                       ),
                                     ),
                                     Text(
                                         categoryList[index - 2]["brand_name"]
                                             .toString(),
                                         softWrap: false,
                                         maxLines: 3,
                                         overflow: TextOverflow.ellipsis,
                                         style: TextStyle(
                                             color: Colors.white,
                                             fontFamily: 'Poppines_extlight')),
                                     SizedBox(
                                       height: 10,
                                     ),
                                     Container(
                                       width:
                                           MediaQuery.of(context).size.width,
                                       height: 30,
                                       child: Row(
                                         mainAxisAlignment:
                                             MainAxisAlignment.spaceBetween,
                                         crossAxisAlignment:
                                             CrossAxisAlignment.center,
                                         children: <Widget>[
                                           Padding(
                                             padding: const EdgeInsets.only(
                                                 top: 3.0),
                                             child: Text(
                                                 "\u{20B9} " +
                                                     categoryList[index - 2]
                                                             ["price"]
                                                         .toString(),
                                                 style: TextStyle(
                                                     color: Colors.white,
                                                     fontFamily:
                                                         'Poppines_extlight')),
                                           ),
                                           Padding(
                                             padding: const EdgeInsets.only(
                                                 bottom: 0.0),
                                             child: IconButton(
                                                 icon: Icon(
                                                   Icons.bookmark_border,
                                                   color: Colors.transparent,
                                                   size: 20,
                                                 ),
                                                 onPressed: () {}),
                                           )
                                         ],
                                       ),
                                     ),
                                   ],
                                 ),
                               ),
                             ),
                           ),
                           InkWell(
                             onTap: () {
                               Navigator.push(
                                   context,
                                   PageTransition(
                                       type: PageTransitionType.fade,
                                       duration: Duration(milliseconds: 400),
                                       child: Product_Page(
                                           categoryList[index - 1])));
                             },
                             child: Padding(
                               padding:
                                   const EdgeInsets.symmetric(horizontal: 5.0),
                               child: Container(
                                 width:
                                     (MediaQuery.of(context).size.width / 2) -
                                         10,
                                 child: Column(
                                   crossAxisAlignment:
                                       CrossAxisAlignment.start,
                                   children: [
                                     Container(
                                       color:
                                           Theme.of(context).primaryColorLight,
                                       child: Center(
                                         child: categoryList[index - 1]
                                                         ["product_image"]
                                                     .toString() ==
                                                 "null"
                                             ? Image.asset(
                                                 "assets/images/beer.jpeg")
                                             : Image.network(
                                                 categoryList[index - 1]
                                                         ["product_image"]
                                                     .toString(),
                                                 fit: BoxFit.cover,
                                               ),
                                       ),
                                     ),
                                     Text(
                                         categoryList[index - 1]["brand_name"]
                                             .toString(),
                                         softWrap: false,
                                         maxLines: 3,
                                         overflow: TextOverflow.ellipsis,
                                         style: TextStyle(
                                             color: Colors.white,
                                             fontFamily: 'Poppines_extlight')),
                                     SizedBox(
                                       height: 10,
                                     ),
                                     Container(
                                       width:
                                           MediaQuery.of(context).size.width,
                                       height: 30,
                                       child: Row(
                                         mainAxisAlignment:
                                             MainAxisAlignment.spaceBetween,
                                         crossAxisAlignment:
                                             CrossAxisAlignment.center,
                                         children: <Widget>[
                                           Padding(
                                             padding: const EdgeInsets.only(
                                                 top: 3.0),
                                             child: Text(
                                                 "\u{20B9} " +
                                                     categoryList[index - 1]
                                                             ["price"]
                                                         .toString(),
                                                 style: TextStyle(
                                                     color: Colors.white,
                                                     fontFamily:
                                                         'Poppines_extlight')),
                                           ),
                                           IconButton(
                                               icon: Icon(
                                                 Icons.bookmark_border,
                                                 color: Colors.transparent,
                                                 size: 20,
                                               ),
                                               onPressed: () {})
                                         ],
                                       ),
                                     ),
                                   ],
                                 ),
                               ),
                             ),
                           ),
                         ],
                       );
                     } else {
                       return InkWell(
                         onTap: () {
                           Navigator.push(
                               context,
                               PageTransition(
                                   type: PageTransitionType.fade,
                                   duration: Duration(milliseconds: 400),
                                   child: Product_Page(categoryList[index])));
                         },
                         child: Padding(
                           padding: const EdgeInsets.symmetric(
                               horizontal: 10.0, vertical: 10.0),
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
                               Container(
                                 height: 500,
                                 width: MediaQuery.of(context).size.width,
                                 color: Theme.of(context).primaryColorLight,
                                 child: categoryList[index]["product_image"]
                                             .toString() ==
                                         "null"
                                     ? Image.asset("assets/images/beer.jpeg")
                                     : Image.network(
                                         categoryList[index]["product_image"]
                                             .toString(),
                                         fit: BoxFit.cover,
                                       ),
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(top: 15.0),
                                 child: Row(
                                   mainAxisAlignment:
                                       MainAxisAlignment.spaceBetween,
                                   children: [
                                     Container(
                                       width:
                                           MediaQuery.of(context).size.width -
                                               40,
                                       child: Text(
                                           categoryList[index]["brand_name"]
                                               .toString(),
                                           softWrap: false,
                                           maxLines: 1,
                                           overflow: TextOverflow.ellipsis,
                                           style: TextStyle(
                                               color: Colors.white,
                                               fontFamily:
                                                   'Poppines_extlight')),
                                     ),
                                     GestureDetector(
                                       onTap: () {
                                         print("Icon Clicked");
                                       },
                                       child: Icon(
                                         Icons.bookmark_border,
                                         color: Colors.transparent,
                                         size: 20,
                                       ),
                                     ),
                                   ],
                                 ),
                               ),
                               Text(
                                   "\u{20B9} " +
                                       categoryList[index]["price"].toString(),
                                   style: TextStyle(
                                       color: Colors.white,
                                       fontFamily: 'Poppines_extlight')),
                             ],
                           ),
                         ),
                       );
                     }
                   } else if (index == categoryList.length - 1) {
                     return InkWell(
                       onTap: () {
                         Navigator.push(
                             context,
                             PageTransition(
                                 type: PageTransitionType.fade,
                                 duration: Duration(milliseconds: 400),
                                 child: Product_Page(categoryList[index])));
                       },
                       child: Padding(
                         padding: const EdgeInsets.symmetric(
                             horizontal: 10.0, vertical: 10.0),
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Container(
                               height: 500,
                               width: MediaQuery.of(context).size.width,
                               color: Theme.of(context).primaryColorLight,
                               child: categoryList[index]["product_image"]
                                           .toString() ==
                                       "null"
                                   ? Image.asset("assets/images/beer.jpeg")
                                   : Image.network(
                                       categoryList[index]["product_image"]
                                           .toString(),
                                       fit: BoxFit.cover,
                                     ),
                             ),
                             Padding(
                               padding: const EdgeInsets.only(top: 15.0),
                               child: Row(
                                 mainAxisAlignment:
                                     MainAxisAlignment.spaceBetween,
                                 children: [
                                   Text(
                                       categoryList[index]["brand_name"]
                                           .toString(),
                                       softWrap: false,
                                       maxLines: 1,
                                       overflow: TextOverflow.ellipsis,
                                       style: TextStyle(
                                           color: Colors.white,
                                           fontFamily: 'Poppines_extlight')),
                                   GestureDetector(
                                     onTap: () {
                                       print("Icon Clicked");
                                     },
                                     child: Icon(
                                       Icons.bookmark_border,
                                       color: Colors.transparent,
                                       size: 20,
                                     ),
                                   ),
                                 ],
                               ),
                             ),
                             Text(
                                 "\u{20B9} " +
                                     categoryList[index]["price"].toString(),
                                 style: TextStyle(
                                     color: Colors.white,
                                     fontFamily: 'Poppines_extlight')),
                           ],
                         ),
                       ),
                     );
                   }
                   return Container();
                 }
               }
             })

[sidrao2006]

Hey @KushalPathak ,
This issue tracker is used for tracking bugs and feature requests for the flutter framework, engine and the flutter tool.
Please see https://flutter.dev/community for resources and asking queries doubts and assistance on personal code. You may get some help if you post it on StackOverflow and if you need help with your code, please check https://www.reddit.com/r/flutterhelp/.

Thanks!

[darshankawar]

@KushalPathak
Your question is better suited for StackOver flow. Please see https://flutter.dev/community for resources. If you need help with your code, please see https://www.reddit.com/r/flutterhelp/
Closing, as this isn't an issue with Flutter itself. If you disagree, please write in the comments and I will reopen it.
Thank you

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.