Flutter listView isn't updating after deleting items - flutter

Question

I'm using a list view to display some items and also I'm using flutter_tindercard
to approve or refuse items when an item is approved it should be added to the approved items list then removed from the list view , and the same for refused items , but the issue when the item is refused or approved it is not removing from the list view.
PS: the bottom elements are not moving to the top
my code:
import 'package:flutter/material.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';
class ExampleHomePage extends StatefulWidget {
#override
_ExampleHomePageState createState() => _ExampleHomePageState();
}
class _ExampleHomePageState extends State<ExampleHomePage>
with TickerProviderStateMixin {
List approved = [];
List refused = [];
List<String> welcomeImages = [
"https://images.unsplash.com/photo-1631636176993-759dea1a1300?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631634176568-f543af6a41de?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631691971564-adf9419d904e?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631641906574-24adb8594649?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631621461675-e61a1f28d3d6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
];
List<TinderCarder> cards = [];
CardController controller = CardController(); //Use this to trigger swap.
#override
void initState() {
// TODO: implement initState
super.initState();
cards = welcomeImages.map((element) {
return TinderCarder(
image: element,
controller: controller,
onLeftPress: () {
setState(() {
cards.removeAt(element.indexOf(element));
print('index is: ' + "${element.indexOf(element)}");
print('list length: ' + cards.length.toString());
});
},
onRightPress: () {
setState(() {
cards.removeAt(element.indexOf(element));
print('index is: ' + "${element.indexOf(element)}");
print('list length: ' + cards.length.toString());
});
},
);
}).toList();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
child: ListView(
children: cards,
),
),
);
}
}
class TinderCarder extends StatelessWidget {
final String image;
Function onLeftPress;
Function onRightPress;
var controller;
TinderCarder(
{required this.image,
this.controller,
required this.onLeftPress,
required this.onRightPress});
#override
Widget build(BuildContext context) {
return Container(
height: 200,
child: TinderSwapCard(
orientation: AmassOrientation.BOTTOM,
totalNum: 1,
stackNum: 3,
swipeEdge: 4.0,
maxWidth: double.infinity,
maxHeight: MediaQuery.of(context).size.width * 0.9,
minWidth: MediaQuery.of(context).size.width * 0.8,
minHeight: MediaQuery.of(context).size.width * 0.8,
cardBuilder: (context, index) => Card(
child: Image.network(
image,
width: double.infinity,
fit: BoxFit.cover,
),
),
cardController: controller,
swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
/// Get swiping card's alignment
if (align.x < 0) {
} else if (align.x > 0) {}
},
swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
print(orientation.toString());
if (orientation == CardSwipeOrientation.LEFT) {
print("Card is LEFT swiping");
// print(welcomeImages.length);
onLeftPress();
} else if (orientation == CardSwipeOrientation.RIGHT) {
print("Card is RIGHT swiping");
// print(welcomeImages.length);
onRightPress();
}
},
),
);
}
}

Answer 1

Edited
Try with setstate
import 'package:flutter/material.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';
class ExampleHomePage extends StatefulWidget {
#override
_ExampleHomePageState createState() => _ExampleHomePageState();
}
class _ExampleHomePageState extends State<ExampleHomePage>
with TickerProviderStateMixin {
List approved = [];
List refused = [];
List<String> welcomeImages = [
"https://images.unsplash.com/photo-1631636176993-759dea1a1300?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631634176568-f543af6a41de?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631691971564-adf9419d904e?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631641906574-24adb8594649?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1631621461675-e61a1f28d3d6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
];
List<TinderCarder> cards = [];
CardController controller = CardController(); //Use this to trigger swap.
#override
void initState() {
// TODO: implement initState
super.initState();
cards = welcomeImages.map((element) {
return TinderCarder(
image: element,
controller: controller,
onLeftPress: () {
setState(() {
cards.removeAt(element.indexOf(element));
print('index is: ' + "${element.indexOf(element)}");
print('list length: ' + cards.length.toString());
});
},
onRightPress: () {
setState(() {
cards.removeAt(element.indexOf(element));
print('index is: ' + "${element.indexOf(element)}");
print('list length: ' + cards.length.toString());
});
},
);
}).toList();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: ListView(
shrinkWrap: true,
key: Key(cards.length.toString()),
physics: ScrollPhysics(),
children: cards,
),
),
),
);
}
}
class TinderCarder extends StatelessWidget {
final String image;
Function onLeftPress;
Function onRightPress;
var controller;
TinderCarder(
{ this.image,
this.controller,
this.onLeftPress,
this.onRightPress});
#override
Widget build(BuildContext context) {
return Container(
height: 200,
child: TinderSwapCard(
orientation: AmassOrientation.BOTTOM,
totalNum: 1,
stackNum: 3,
swipeEdge: 4.0,
maxWidth: MediaQuery.of(context).size.width * 0.9,
maxHeight: MediaQuery.of(context).size.width * 0.9,
minWidth: MediaQuery.of(context).size.width * 0.8,
minHeight: MediaQuery.of(context).size.width * 0.8,
cardBuilder: (context, index) => Card(
child: Image.network(
image,
width: double.infinity,
fit: BoxFit.cover,
),
),
cardController: controller,
swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
/// Get swiping card's alignment
if (align.x < 0) {
} else if (align.x > 0) {}
},
swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
print(orientation.toString());
if (orientation == CardSwipeOrientation.LEFT) {
print("Card is LEFT swiping");
// print(welcomeImages.length);
onLeftPress();
} else if (orientation == CardSwipeOrientation.RIGHT) {
print("Card is RIGHT swiping");
// print(welcomeImages.length);
onRightPress();
}
},
),
);
}
}

Answer 2

If you are using stateful widget then apply setstate() to build again your widget.
If you want to use stateless widget than use state management like GetX or provider.
For GetX create observable list in controller and wrap widget with obx so whenever list is updated the obx will build that particular widget for you again.
To Learn GetX Properly go through this playlist created by tadas petra.
https://www.youtube.com/playlist?list=PL26uY6-lIzqkmvpNr9gMCrIvl8k5Mqrhs