Skip to content

Commit

Permalink
Added textfield functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mkohler4
Mkohler4 committed Nov 27, 2021
1 parent e2acd15 commit 974f941
Show file tree
Hide file tree
Showing 6 changed files with 283 additions and 170 deletions.
13 changes: 13 additions & 0 deletions .vscode/launch.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Dart & Flutter",
"request": "launch",
"type": "dart"
}
]
}
169 changes: 99 additions & 70 deletions example/lib/widgets/swipe_feed.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,85 +27,114 @@ class _SwipeFeedExampleState<T> extends State<SwipeFeedExample> {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 32, left: 16, right: 16, bottom: 30),
child: Column(
return SafeArea(
bottom: true,
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Padding(
padding: const EdgeInsets.only(right: 34),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios, color: Colors.grey),
onPressed: () => Navigator.of(context).pop(),
Align(
alignment: Alignment.topCenter,
child: Container(
height: 57,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(right: 34),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios, color: Colors.grey),
onPressed: () => Navigator.of(context).pop(),
),
const Spacer(),
const Text('Swipe-Feed', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32)),
const Spacer(),
],
),
const Spacer(),
const Text('Swipe-Feed', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32)),
const Spacer(),
],
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 32),
child: SwipeFeed<dynamic>(
controller: feedController,
loader: loadItems,
swipeAlert: (index){
return true;
},
overlayBuilder: (forwardAnimation, reverseAnimation, index, item){
return Container(
height: 300,
width: 300,
color: Colors.black,
child: MaterialButton(
child: Text(item, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 24)),
onPressed: (){
forwardAnimation(index);
}
)
);
},
childBuilder: (value, isLast) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16)
),
child: Center(
child: Text(value, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 24)),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.grey[400],
child: SizedBox.fromSize(size: const Size.fromHeight(49))
),
),
Positioned.fill(
child: SwipeFeed<dynamic>(
padding: const EdgeInsets.only(top: 57 + 16, left: 8, right: 8, bottom: 49 + 13),
duration: const Duration(milliseconds: 300),
controller: feedController,
loader: loadItems,
swipeAlert: (index){
return true;
},
overlayBuilder: (forwardAnimation, reverseAnimation, index, item){
return Container(
height: 300,
width: 300,
color: Colors.black,
child: MaterialButton(
child: Text(item, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 24)),
onPressed: (){
forwardAnimation(index);
}
)
);
},
childBuilder: (dynamic value, bool isLast, bool isExpanded, void Function() close ) {
return Container(
decoration: BoxDecoration(
color: isExpanded ? Colors.red : Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.black, width: 3)
),
child: Center(
child: Container(
color: isExpanded ? Colors.amber : null,
child: GestureDetector(
onTap: isExpanded ? close : null,
child: Column(
children: [
Text(
'value ${isExpanded ? '\n\n Tap to UnExpand' : ''}',
style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 24)
),
const TextField(),
],
),
),
),
);
},
onSwipe: (dx, dy, direction, item) async{
if(direction == DismissDirection.startToEnd){
feedController.completeFillBar(0.75, IconPosition.RIGHT, CardPosition.Right);
),
);
},
onSwipe: (dx, dy, direction, item) async{
if(direction == DismissDirection.startToEnd){
feedController.completeFillBar(0.75, IconPosition.RIGHT, CardPosition.Right);
}
else if(direction == DismissDirection.endToStart){
feedController.completeFillBar(0.75, IconPosition.LEFT, CardPosition.Left);
}
else if(direction == DismissDirection.up){
if(dx >= 0){
feedController.completeFillBar(0.75, IconPosition.TOP, CardPosition.Right);
}
else if(direction == DismissDirection.endToStart){
feedController.completeFillBar(0.75, IconPosition.LEFT, CardPosition.Left);
else{
feedController.completeFillBar(0.75, IconPosition.TOP, CardPosition.Left);
}
else if(direction == DismissDirection.up){
if(dx >= 0){
feedController.completeFillBar(0.75, IconPosition.TOP, CardPosition.Right);
}
else{
feedController.completeFillBar(0.75, IconPosition.TOP, CardPosition.Left);
}
}
else if(direction == DismissDirection.down){
if(dx >= 0){
feedController.completeFillBar(1.0, IconPosition.BOTTOM, CardPosition.Right);
}
else if(direction == DismissDirection.down){
if(dx >= 0){
feedController.completeFillBar(1.0, IconPosition.BOTTOM, CardPosition.Right);
}
else{
feedController.completeFillBar(1.0, IconPosition.BOTTOM, CardPosition.Left);
}
else{
feedController.completeFillBar(1.0, IconPosition.BOTTOM, CardPosition.Left);
}
},
),
}
},
),
),
],
Expand Down
35 changes: 18 additions & 17 deletions lib/animated/poll_swipe_animated_icon.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,7 @@ class _PollPageAnimatedIconState extends State<PollPageAnimatedIcon> with Ticker

//Retreive the icon color from the alignment
Color? get color {

AppColor colors = ColorProvider.of(context);

if(widget.position == IconPosition.TOP) {
return colors.onBackground;
} else if(widget.position == IconPosition.BOTTOM) {
Expand Down Expand Up @@ -174,32 +172,32 @@ class _PollPageAnimatedIconState extends State<PollPageAnimatedIcon> with Ticker

///Updates the show animation value
void show(double show){
// print(show / 25);
showAnimation.animateTo(min(1.0, show), duration: Duration(milliseconds: 0));
if(show > 1.0){
if(!moveAnimation.isAnimating) {
moveAnimation.animateTo(lerpDouble(0, 0.5, show / 7)!, duration: Duration.zero);
}
}
else if(show < 0.05){
moveAnimation.animateTo(0);
}

///Updates the show animation value
void moveIcon(double move){
if(!moveAnimation.isAnimating) {
moveAnimation.animateTo(lerpDouble(0, 0.5, move / 7)!, duration: Duration.zero);
}
}

///Updates moving the icon
void maximize(bool move){
this.move = move;
if(this.move){
showAnimation.animateTo(1.0, duration: Duration(milliseconds: 0));
moveAnimation.forward(from: moveAnimation.value);
Future.delayed(Duration(milliseconds: 250)).then((value){
showAnimation.animateTo(1.0, duration: Duration(milliseconds: 0));
Future.delayed(Duration(milliseconds: (800 * (1.0 - moveAnimation.value) - 160).toInt())).then((value){
showAnimation.animateTo(0.0, duration: Duration(milliseconds: 160));
});
}
else{
moveAnimation.animateTo(0, duration: Duration(milliseconds: 0));
//After a delay make the icon disappear
Future.delayed(Duration(milliseconds: 250)).then((_){
show(0);
show(0.0);
moveIcon(0.0);
});
}
if(mounted) {
Expand Down Expand Up @@ -232,11 +230,11 @@ class _PollPageAnimatedIconState extends State<PollPageAnimatedIcon> with Ticker
child: TrashCan(controller: moveAnimation)
);
} else if(widget.position == IconPosition.BOTTOM) {
return Icon(PollarIcons.trust_large_pressed, size: 36 * scaleSequence.value, color: color,);
return Icon(Icons.star, size: 36 * scaleSequence.value, color: color,);
} else if(widget.position == IconPosition.LEFT) {
return Icon(PollarIcons.agree_large_pressed, size: 36 * scaleSequence.value, color: color);
return Icon(Icons.check, size: 36 * scaleSequence.value, color: color);
} else if(widget.position == IconPosition.RIGHT) {
return Icon(PollarIcons.disagree_large_resting, size: 36 * scaleSequence.value, color: color,);
return Icon(Icons.cancel, size: 36 * scaleSequence.value, color: color,);
} else {
return null;
}
Expand Down Expand Up @@ -323,7 +321,10 @@ class PollPageAnimatedIconController extends ChangeNotifier {
void _update() => notifyListeners();

///Updates the show opacity animation value
void show([double opacity = 1.0]) => _retreiveState((s) => s.show(opacity));
void show([double show = 1.0]) => _retreiveState((s) => s.show(show));

///Updates the show opacity animation value
void move([double move = 1.0]) => _retreiveState((s) => s.moveIcon(move));

///Updates the maximization of the icon
void maximize([bool move = true]) => _retreiveState((s) => s.maximize(move));
Expand Down
Loading

0 comments on commit 974f941

Please sign in to comment.