swipeable_card_stack 0.0.2 swipeable_card_stack: ^0.0.2 copied to clipboard
This is Tinder like swipeable cards package. You can add your own widgets to the stack, receive all four events, left, right, up and down. You can define your own business logic for each direction.
import 'package:example/card_view.dart';
import 'package:flutter/material.dart';
import 'package:swipeable_card_stack/swipeable_card_stack.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int counter = 4;
@override
Widget build(BuildContext context) {
//create a CardController
CardController _cardController = CardController();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SwipeableCardsSection(
cardController: _cardController,
context: context,
//add the first 3 cards
items: [
CardView(text: "First card"),
CardView(text: "Second card"),
CardView(text: "Third card"),
],
onCardSwiped: (dir, index, widget) {
//Add the next card
if (counter <= 20) {
_cardController.addItem(CardView(text: "Card $counter"));
counter++;
}
if (dir == Direction.left) {
print('onDisliked ${(widget as CardView).text} $index');
} else if (dir == Direction.right) {
print('onLiked ${(widget as CardView).text} $index');
} else if (dir == Direction.up) {
print('onUp ${(widget as CardView).text} $index');
} else if (dir == Direction.down) {
print('onDown ${(widget as CardView).text} $index');
}
},
enableSwipeUp: true,
enableSwipeDown: true,
),
Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FloatingActionButton(
child: Icon(Icons.chevron_left),
onPressed: () => _cardController.triggerSwipeLeft(),
),
FloatingActionButton(
child: Icon(Icons.chevron_right),
onPressed: () => _cardController.triggerSwipeRight(),
),
FloatingActionButton(
child: Icon(Icons.arrow_upward),
onPressed: () => _cardController.triggerSwipeUp(),
),
FloatingActionButton(
child: Icon(Icons.arrow_downward),
onPressed: () => _cardController.triggerSwipeDown(),
),
],
),
)
],
),
);
}
}