Removing and Add new Cards in the List -Flutter - flutter

Question

I'm working in a Dating App. So, it's like a Tinder, basically.
We have the cards layout here. So, it's a List in a Stack with Cards Widgets.
In this example that I was following https://mightytechno.com/flutter-tinder-swipe-cards/ he create a List and when Swiped it is removed from List. But, when I try to add new cards, the cards aren't added.
My SwipeArea:
List<Widget> cards = List();
#override
void initState() {
super.initState();
cards.add(
new ProfileCard());
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
child: Stack(
children: cards,
),
));
}
void callBack(Widget value) {
setState(() {
cards.remove(value);
cards.add(new ProfileCard());
_adCardCounter++;
});
}
When the ProfileCard (card) is swiped, callBack is called, then I remove the Widget from List and Add a new one.
But, I can't see the Card in the Display.
If have 2 cards in a list, and I remove 2 and add 2, it display none cards.. but the array have 3.
Someone knows why? And how is the best solution to work with it? I tried to reuse the cards, but I can't.

Answer 1

You can copy past run full code below
You can use package https://pub.dev/packages/flutter_tindercard
You can add new card in swipeCompleteCallback
code snippet
swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
_addToStream();
...
void _addToStream() {
Random random = new Random();
int index = random.nextInt(3);
print("index $index");
welcomeImages.add('https://picsum.photos/250?image=$index');
welcomeImages.removeAt(0);
_streamController.add(welcomeImages);
}
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';
import 'dart:async';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AsyncDataExampleHomePage(),
);
}
}
// support for asynchronous data events
class AsyncDataExampleHomePage extends StatefulWidget {
#override
_AsyncDataExampleHomePageState createState() =>
_AsyncDataExampleHomePageState();
}
class _AsyncDataExampleHomePageState extends State<AsyncDataExampleHomePage>
with TickerProviderStateMixin {
StreamController<List<String>> _streamController;
List<String> welcomeImages = [
"https://picsum.photos/250?image=9",
"https://picsum.photos/250?image=10",
"https://picsum.photos/250?image=11",
];
#override
initState() {
super.initState();
_streamController = StreamController<List<String>>();
}
void _addToStream() {
Random random = new Random();
int index = random.nextInt(3);
print("index $index");
welcomeImages.add('https://picsum.photos/250?image=$index');
welcomeImages.removeAt(0);
_streamController.add(welcomeImages);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("asynchronous data events test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Added image appears on top:',
),
StreamBuilder<List<String>>(
stream: _streamController.stream,
initialData: welcomeImages,
builder:
(BuildContext context, AsyncSnapshot<List<String>> snapshot) {
print('snapshot.data.length: ${snapshot.data.length}');
if (snapshot.hasError) return Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('Add image');
case ConnectionState.waiting:
//return Text('Awaiting images...');
case ConnectionState.active:
print("build active");
return _AsyncDataExample(context, snapshot.data);
case ConnectionState.done:
return Text('\$${snapshot.data} (closed)');
}
return null; // unreachable
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _addToStream,
tooltip: 'Add image',
child: Icon(Icons.add),
),
);
}
Widget _AsyncDataExample(BuildContext context, List<String> imageList) {
CardController controller; //Use this to trigger swap.
print(imageList.length);
return Center(
key: UniqueKey(),
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
child: TinderSwapCard(
orientation: AmassOrientation.TOP,
totalNum: imageList.length,
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) {
print("cardbuilder ${index}");
print("imageList length ${imageList.length}");
return Card(
color: Colors.blue,
child: Image.network('${imageList[index]}'),
);
},
cardController: controller = CardController(),
swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
/// Get swiping card's alignment
if (align.x < 0) {
//Card is LEFT swiping
} else if (align.x > 0) {
//Card is RIGHT swiping
}
},
swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
_addToStream();
/// Get orientation & index of swiped card!
},
),
),
);
}
}