GitLocker: The Coding Marketplace

Description:

tcard

TCard #
Tinder like cards.

TCard

Install
Uasge

Normal widget
Network image
Use a controller to control
Determine the sliding direction
Reset width new cards

Property
Contribute
License

Install #
# pubspec.yaml
dependencies:
tcard: ^1.3.5
copied to clipboard
Uasge #
Normal widget #
List<Widget> cards = List.generate(
5,
(index) => Container(
color: Colors.blue,
child: Center(
child: Text(
'$index',
style: TextStyle(fontSize: 60, color: Colors.white),
),
),
),
);

TCard(
cards: cards,
)
copied to clipboard

Network image #
List<String> images = [
'https://gank.io/images/5ba77f3415b44f6c843af5e149443f94',
'https://gank.io/images/02eb8ca3297f4931ab64b7ebd7b5b89c',
'https://gank.io/images/31f92f7845f34f05bc10779a468c3c13',
'https://gank.io/images/b0f73f9527694f44b523ff059d8a8841',
'https://gank.io/images/1af9d69bc60242d7aa2e53125a4586ad',
];

List<Widget> cards = List.generate(
images.length,
(int index) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
offset: Offset(0, 17),
blurRadius: 23.0,
spreadRadius: -13.0,
color: Colors.black54,
)
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.network(
images[index],
fit: BoxFit.cover,
),
),
);
},
);

TCard(
size: Size(400, 600),
cards: cards,
);
copied to clipboard

Image from gank.io
Use a controller to control #
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
TCardController _controller = TCardController();

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TCard(
cards: cards,
size: Size(360, 480),
controller: _controller,
onForward: (index, info) {
print(index);
},
onBack: (index, info) {
print(index);
},
onEnd: () {
print('end');
},
),
SizedBox(
height: 40,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
OutlineButton(
onPressed: () {
print(_controller);
_controller.back();
},
child: Text('Back'),
),
OutlineButton(
onPressed: () {
_controller.reset();
},
child: Text('Reset'),
),
OutlineButton(
onPressed: () {
_controller.forward();
},
child: Text('Forward'),
),
],
),
],
),
),
);
}
}
copied to clipboard

Determine the sliding direction #
TCard(
cards: cards,
size: Size(360, 480),
controller: _controller,
onForward: (index, info) {
print(index);
print(info.direction);
if (info.direction == SwipDirection.Right) {
print('like');
} else {
print('dislike');
}
},
onBack: (index, info) {
print(index);
},
onEnd: () {
print('end');
},
)
copied to clipboard

Reset width new cards #
List<Widget> newCards = [];

TCardController _controller = TCardController();

_controller.reset(cards: newCards);
copied to clipboard
Property #

property
type
default
description
required

cards
List<Widget>
null
Render cards
true

size
Size
null
Card size
false

controller
TCardController
null
Card controller
false

onForward
ForwardCallback
null
Forward animation callback
false

onBack
BackCallback
null
Back animation callback
false

onEnd
EndCallback
null
Forward end callback
false

lockYAxis
bool
false
Lock Y Axis Gesture
false

slideSpeed
double
20
How quick should it be slided? less is slower. 10 is a bit slow. 20 is a quick enough.
false

delaySlideFor
int
500
How long does it have to wait until the next slide is sliable? less is quicker. 100 is fast enough. 500 is a bit slow.
false

Contribute #

Fork it (https://github.com/xrr2016/tcard.git)
Create your feature branch (git checkout -b feature/foo)
Commit your changes (git commit -am 'Add some foo')
Push to the branch (git push origin feature/foo)
Create a new Pull Request

License #
MIT