parent
75d41d8748
commit
e53456bf55
|
|
@ -0,0 +1 @@
|
||||||
|
include: package:flutter_lints/flutter.yaml
|
||||||
|
|
@ -22,7 +22,7 @@ class CardView extends StatelessWidget {
|
||||||
),
|
),
|
||||||
SizedBox.expand(
|
SizedBox.expand(
|
||||||
child: Container(
|
child: Container(
|
||||||
decoration: BoxDecoration(
|
decoration: const BoxDecoration(
|
||||||
gradient: LinearGradient(
|
gradient: LinearGradient(
|
||||||
colors: [Colors.transparent, Colors.black54],
|
colors: [Colors.transparent, Colors.black54],
|
||||||
begin: Alignment.center,
|
begin: Alignment.center,
|
||||||
|
|
@ -32,20 +32,21 @@ class CardView extends StatelessWidget {
|
||||||
Align(
|
Align(
|
||||||
alignment: Alignment.bottomLeft,
|
alignment: Alignment.bottomLeft,
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
|
padding: const EdgeInsets.symmetric(
|
||||||
|
vertical: 16.0, horizontal: 16.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
mainAxisAlignment: MainAxisAlignment.end,
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Text(text,
|
Text(text,
|
||||||
style: TextStyle(
|
style: const TextStyle(
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
fontSize: 20.0,
|
fontSize: 20.0,
|
||||||
fontWeight: FontWeight.w700)),
|
fontWeight: FontWeight.w700)),
|
||||||
Padding(padding: EdgeInsets.only(bottom: 8.0)),
|
const Padding(padding: EdgeInsets.only(bottom: 8.0)),
|
||||||
Text("$text details",
|
Text("$text details",
|
||||||
textAlign: TextAlign.start,
|
textAlign: TextAlign.start,
|
||||||
style: TextStyle(color: Colors.white)),
|
style: const TextStyle(color: Colors.white)),
|
||||||
],
|
],
|
||||||
)),
|
)),
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,12 @@ import 'package:flutter/material.dart';
|
||||||
import 'package:stacked_cards/stacked_cards.dart';
|
import 'package:stacked_cards/stacked_cards.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
runApp(MyApp());
|
runApp(const MyApp());
|
||||||
}
|
}
|
||||||
|
|
||||||
class MyApp extends StatelessWidget {
|
class MyApp extends StatelessWidget {
|
||||||
|
const MyApp({Key? key}) : super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return MaterialApp(
|
return MaterialApp(
|
||||||
|
|
@ -14,17 +16,17 @@ class MyApp extends StatelessWidget {
|
||||||
theme: ThemeData(
|
theme: ThemeData(
|
||||||
primarySwatch: Colors.blue,
|
primarySwatch: Colors.blue,
|
||||||
),
|
),
|
||||||
home: MyHomePage(title: 'Flutter Demo Home Page'),
|
home: const MyHomePage(title: 'Flutter Demo Home Page'),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class MyHomePage extends StatefulWidget {
|
class MyHomePage extends StatefulWidget {
|
||||||
MyHomePage({Key? key, required this.title}) : super(key: key);
|
const MyHomePage({Key? key, required this.title}) : super(key: key);
|
||||||
final String title;
|
final String title;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
_MyHomePageState createState() => _MyHomePageState();
|
State<MyHomePage> createState() => _MyHomePageState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _MyHomePageState extends State<MyHomePage> {
|
class _MyHomePageState extends State<MyHomePage> {
|
||||||
|
|
@ -33,7 +35,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
//create a CardController
|
//create a CardController
|
||||||
SwipeableCardSectionController _cardController =
|
SwipeableCardSectionController cardController =
|
||||||
SwipeableCardSectionController();
|
SwipeableCardSectionController();
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
|
|
@ -44,10 +46,10 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: [
|
children: [
|
||||||
SwipeableCardsSection(
|
SwipeableCardsSection(
|
||||||
cardController: _cardController,
|
cardController: cardController,
|
||||||
context: context,
|
context: context,
|
||||||
//add the first 3 cards
|
//add the first 3 cards
|
||||||
items: [
|
items: const [
|
||||||
CardView(text: "First card"),
|
CardView(text: "First card"),
|
||||||
CardView(text: "Second card"),
|
CardView(text: "Second card"),
|
||||||
CardView(text: "Third card"),
|
CardView(text: "Third card"),
|
||||||
|
|
@ -55,43 +57,43 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||||
onCardSwiped: (dir, index, widget) {
|
onCardSwiped: (dir, index, widget) {
|
||||||
//Add the next card
|
//Add the next card
|
||||||
if (counter <= 20) {
|
if (counter <= 20) {
|
||||||
_cardController.addItem(CardView(text: "Card $counter"));
|
cardController.addItem(CardView(text: "Card $counter"));
|
||||||
counter++;
|
counter++;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (dir == Direction.left) {
|
if (dir == Direction.left) {
|
||||||
print('onDisliked ${(widget as CardView).text} $index');
|
debugPrint('onDisliked ${(widget as CardView).text} $index');
|
||||||
} else if (dir == Direction.right) {
|
} else if (dir == Direction.right) {
|
||||||
print('onLiked ${(widget as CardView).text} $index');
|
debugPrint('onLiked ${(widget as CardView).text} $index');
|
||||||
} else if (dir == Direction.up) {
|
} else if (dir == Direction.up) {
|
||||||
print('onUp ${(widget as CardView).text} $index');
|
debugPrint('onUp ${(widget as CardView).text} $index');
|
||||||
} else if (dir == Direction.down) {
|
} else if (dir == Direction.down) {
|
||||||
print('onDown ${(widget as CardView).text} $index');
|
debugPrint('onDown ${(widget as CardView).text} $index');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
enableSwipeUp: true,
|
enableSwipeUp: true,
|
||||||
enableSwipeDown: true,
|
enableSwipeDown: true,
|
||||||
),
|
),
|
||||||
Container(
|
Container(
|
||||||
margin: EdgeInsets.symmetric(vertical: 20.0),
|
margin: const EdgeInsets.symmetric(vertical: 20.0),
|
||||||
child: Row(
|
child: Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
children: [
|
children: [
|
||||||
FloatingActionButton(
|
FloatingActionButton(
|
||||||
child: Icon(Icons.chevron_left),
|
child: const Icon(Icons.chevron_left),
|
||||||
onPressed: () => _cardController.triggerSwipeLeft(),
|
onPressed: () => cardController.triggerSwipeLeft(),
|
||||||
),
|
),
|
||||||
FloatingActionButton(
|
FloatingActionButton(
|
||||||
child: Icon(Icons.chevron_right),
|
child: const Icon(Icons.chevron_right),
|
||||||
onPressed: () => _cardController.triggerSwipeRight(),
|
onPressed: () => cardController.triggerSwipeRight(),
|
||||||
),
|
),
|
||||||
FloatingActionButton(
|
FloatingActionButton(
|
||||||
child: Icon(Icons.arrow_upward),
|
child: const Icon(Icons.arrow_upward),
|
||||||
onPressed: () => _cardController.triggerSwipeUp(),
|
onPressed: () => cardController.triggerSwipeUp(),
|
||||||
),
|
),
|
||||||
FloatingActionButton(
|
FloatingActionButton(
|
||||||
child: Icon(Icons.arrow_downward),
|
child: const Icon(Icons.arrow_downward),
|
||||||
onPressed: () => _cardController.triggerSwipeDown(),
|
onPressed: () => cardController.triggerSwipeDown(),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,7 @@ packages:
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.10.0"
|
version: "1.10.0"
|
||||||
stacked_cards:
|
stacked_cards:
|
||||||
dependency: "direct dev"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
path: ".."
|
path: ".."
|
||||||
relative: true
|
relative: true
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,8 @@ dependencies:
|
||||||
flutter:
|
flutter:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
|
||||||
|
stacked_cards:
|
||||||
|
path: ../
|
||||||
|
|
||||||
# The following adds the Cupertino Icons font to your application.
|
# The following adds the Cupertino Icons font to your application.
|
||||||
# Use with the CupertinoIcons class for iOS style icons.
|
# Use with the CupertinoIcons class for iOS style icons.
|
||||||
|
|
@ -33,8 +35,6 @@ dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
|
||||||
stacked_cards:
|
|
||||||
path: ../
|
|
||||||
|
|
||||||
# For information on the generic Dart part of this file, see the
|
# For information on the generic Dart part of this file, see the
|
||||||
# following page: https://dart.dev/tools/pub/pubspec
|
# following page: https://dart.dev/tools/pub/pubspec
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ const List<Alignment> cardsAlign = [
|
||||||
Alignment(0.0, 0.8),
|
Alignment(0.0, 0.8),
|
||||||
Alignment(0.0, 0.0)
|
Alignment(0.0, 0.0)
|
||||||
];
|
];
|
||||||
List<Size> cardsSize = List.filled(3, Size(1, 1));
|
List<Size> cardsSize = List.filled(3, const Size(1, 1));
|
||||||
|
|
||||||
class SwipeableCardsSection extends StatefulWidget {
|
class SwipeableCardsSection extends StatefulWidget {
|
||||||
final SwipeableCardSectionController? cardController;
|
final SwipeableCardSectionController? cardController;
|
||||||
|
|
@ -45,7 +45,7 @@ class SwipeableCardsSection extends StatefulWidget {
|
||||||
this.appendItemCallback,
|
this.appendItemCallback,
|
||||||
this.enableSwipeUp = true,
|
this.enableSwipeUp = true,
|
||||||
this.enableSwipeDown = true,
|
this.enableSwipeDown = true,
|
||||||
}) {
|
}) : super(key: key) {
|
||||||
cardsSize[0] = Size(MediaQuery.of(context).size.width * cardWidthTopMul,
|
cardsSize[0] = Size(MediaQuery.of(context).size.width * cardWidthTopMul,
|
||||||
MediaQuery.of(context).size.height * cardHeightTopMul);
|
MediaQuery.of(context).size.height * cardHeightTopMul);
|
||||||
cardsSize[1] = Size(MediaQuery.of(context).size.width * cardWidthMiddleMul,
|
cardsSize[1] = Size(MediaQuery.of(context).size.width * cardWidthMiddleMul,
|
||||||
|
|
@ -55,7 +55,7 @@ class SwipeableCardsSection extends StatefulWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
_CardsSectionState createState() => _CardsSectionState();
|
State<SwipeableCardsSection> createState() => _CardsSectionState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _CardsSectionState extends State<SwipeableCardsSection>
|
class _CardsSectionState extends State<SwipeableCardsSection>
|
||||||
|
|
@ -68,7 +68,7 @@ class _CardsSectionState extends State<SwipeableCardsSection>
|
||||||
late AnimationController _controller;
|
late AnimationController _controller;
|
||||||
bool enableSwipe = true;
|
bool enableSwipe = true;
|
||||||
|
|
||||||
final Alignment defaultFrontCardAlign = Alignment(0.0, 0.0);
|
final Alignment defaultFrontCardAlign = const Alignment(0.0, 0.0);
|
||||||
Alignment frontCardAlign = cardsAlign[2];
|
Alignment frontCardAlign = cardsAlign[2];
|
||||||
double frontCardRot = 0.0;
|
double frontCardRot = 0.0;
|
||||||
|
|
||||||
|
|
@ -77,16 +77,16 @@ class _CardsSectionState extends State<SwipeableCardsSection>
|
||||||
bool? shouldAnimate = false;
|
bool? shouldAnimate = false;
|
||||||
if (dir == Direction.left) {
|
if (dir == Direction.left) {
|
||||||
shouldAnimate = swipedCallback(Direction.left, index, cards[0]);
|
shouldAnimate = swipedCallback(Direction.left, index, cards[0]);
|
||||||
frontCardAlign = Alignment(-0.001, 0.0);
|
frontCardAlign = const Alignment(-0.001, 0.0);
|
||||||
} else if (dir == Direction.right) {
|
} else if (dir == Direction.right) {
|
||||||
shouldAnimate = swipedCallback(Direction.right, index, cards[0]);
|
shouldAnimate = swipedCallback(Direction.right, index, cards[0]);
|
||||||
frontCardAlign = Alignment(0.001, 0.0);
|
frontCardAlign = const Alignment(0.001, 0.0);
|
||||||
} else if (dir == Direction.up) {
|
} else if (dir == Direction.up) {
|
||||||
shouldAnimate = swipedCallback(Direction.up, index, cards[0]);
|
shouldAnimate = swipedCallback(Direction.up, index, cards[0]);
|
||||||
frontCardAlign = Alignment(0.0, -0.001);
|
frontCardAlign = const Alignment(0.0, -0.001);
|
||||||
} else if (dir == Direction.down) {
|
} else if (dir == Direction.down) {
|
||||||
shouldAnimate = swipedCallback(Direction.down, index, cards[0]);
|
shouldAnimate = swipedCallback(Direction.down, index, cards[0]);
|
||||||
frontCardAlign = Alignment(0.0, 0.001);
|
frontCardAlign = const Alignment(0.0, 0.001);
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldAnimate ??= true;
|
shouldAnimate ??= true;
|
||||||
|
|
@ -102,7 +102,7 @@ class _CardsSectionState extends State<SwipeableCardsSection>
|
||||||
|
|
||||||
void _enableSwipe(bool isSwipeEnabled) {
|
void _enableSwipe(bool isSwipeEnabled) {
|
||||||
setState(() {
|
setState(() {
|
||||||
this.enableSwipe = isSwipeEnabled;
|
enableSwipe = isSwipeEnabled;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,8 +129,8 @@ class _CardsSectionState extends State<SwipeableCardsSection>
|
||||||
frontCardAlign = cardsAlign[2];
|
frontCardAlign = cardsAlign[2];
|
||||||
|
|
||||||
// Init the animation controller
|
// Init the animation controller
|
||||||
_controller =
|
_controller = AnimationController(
|
||||||
AnimationController(duration: Duration(milliseconds: 700), vsync: this);
|
duration: const Duration(milliseconds: 700), vsync: this);
|
||||||
_controller.addListener(() => setState(() {}));
|
_controller.addListener(() => setState(() {}));
|
||||||
_controller.addStatusListener((AnimationStatus status) {
|
_controller.addStatusListener((AnimationStatus status) {
|
||||||
if (status == AnimationStatus.completed) changeCardsOrder();
|
if (status == AnimationStatus.completed) changeCardsOrder();
|
||||||
|
|
@ -276,26 +276,30 @@ class CardsAnimation {
|
||||||
AnimationController parent) {
|
AnimationController parent) {
|
||||||
return AlignmentTween(begin: cardsAlign[0], end: cardsAlign[1]).animate(
|
return AlignmentTween(begin: cardsAlign[0], end: cardsAlign[1]).animate(
|
||||||
CurvedAnimation(
|
CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.4, 0.7, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.4, 0.7, curve: Curves.easeIn)));
|
||||||
}
|
}
|
||||||
|
|
||||||
static Animation<Size?> backCardSizeAnim(AnimationController parent) {
|
static Animation<Size?> backCardSizeAnim(AnimationController parent) {
|
||||||
return SizeTween(begin: cardsSize[2], end: cardsSize[1]).animate(
|
return SizeTween(begin: cardsSize[2], end: cardsSize[1]).animate(
|
||||||
CurvedAnimation(
|
CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.4, 0.7, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.4, 0.7, curve: Curves.easeIn)));
|
||||||
}
|
}
|
||||||
|
|
||||||
static Animation<Alignment> middleCardAlignmentAnim(
|
static Animation<Alignment> middleCardAlignmentAnim(
|
||||||
AnimationController parent) {
|
AnimationController parent) {
|
||||||
return AlignmentTween(begin: cardsAlign[1], end: cardsAlign[2]).animate(
|
return AlignmentTween(begin: cardsAlign[1], end: cardsAlign[2]).animate(
|
||||||
CurvedAnimation(
|
CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.2, 0.5, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.2, 0.5, curve: Curves.easeIn)));
|
||||||
}
|
}
|
||||||
|
|
||||||
static Animation<Size?> middleCardSizeAnim(AnimationController parent) {
|
static Animation<Size?> middleCardSizeAnim(AnimationController parent) {
|
||||||
return SizeTween(begin: cardsSize[1], end: cardsSize[0]).animate(
|
return SizeTween(begin: cardsSize[1], end: cardsSize[0]).animate(
|
||||||
CurvedAnimation(
|
CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.2, 0.5, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.2, 0.5, curve: Curves.easeIn)));
|
||||||
}
|
}
|
||||||
|
|
||||||
static Animation<Alignment> frontCardDisappearAlignmentAnim(
|
static Animation<Alignment> frontCardDisappearAlignmentAnim(
|
||||||
|
|
@ -311,7 +315,8 @@ class CardsAnimation {
|
||||||
0.0) // Has swiped to the left or right?
|
0.0) // Has swiped to the left or right?
|
||||||
)
|
)
|
||||||
.animate(CurvedAnimation(
|
.animate(CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.0, 0.5, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.0, 0.5, curve: Curves.easeIn)));
|
||||||
} else {
|
} else {
|
||||||
return AlignmentTween(
|
return AlignmentTween(
|
||||||
begin: beginAlign,
|
begin: beginAlign,
|
||||||
|
|
@ -322,7 +327,8 @@ class CardsAnimation {
|
||||||
: beginAlign.y - 30.0) // Has swiped to the top or bottom?
|
: beginAlign.y - 30.0) // Has swiped to the top or bottom?
|
||||||
)
|
)
|
||||||
.animate(CurvedAnimation(
|
.animate(CurvedAnimation(
|
||||||
parent: parent, curve: Interval(0.0, 0.5, curve: Curves.easeIn)));
|
parent: parent,
|
||||||
|
curve: const Interval(0.0, 0.5, curve: Curves.easeIn)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
16
pubspec.lock
16
pubspec.lock
|
|
@ -48,11 +48,25 @@ packages:
|
||||||
description: flutter
|
description: flutter
|
||||||
source: sdk
|
source: sdk
|
||||||
version: "0.0.0"
|
version: "0.0.0"
|
||||||
|
flutter_lints:
|
||||||
|
dependency: "direct dev"
|
||||||
|
description:
|
||||||
|
name: flutter_lints
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "2.0.1"
|
||||||
flutter_test:
|
flutter_test:
|
||||||
dependency: "direct dev"
|
dependency: "direct dev"
|
||||||
description: flutter
|
description: flutter
|
||||||
source: sdk
|
source: sdk
|
||||||
version: "0.0.0"
|
version: "0.0.0"
|
||||||
|
lints:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: lints
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "2.0.1"
|
||||||
matcher:
|
matcher:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|
@ -136,5 +150,5 @@ packages:
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.1.2"
|
version: "2.1.2"
|
||||||
sdks:
|
sdks:
|
||||||
dart: ">=2.17.0-0 <3.0.0"
|
dart: ">=2.17.0 <3.0.0"
|
||||||
flutter: ">=2.5.0"
|
flutter: ">=2.5.0"
|
||||||
|
|
|
||||||
|
|
@ -14,3 +14,4 @@ dependencies:
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
flutter_lints: ^2.0.1
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue