Skip to content

Commit

Permalink
馃敤Refactor: Made AnimatedCardDeck a widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@JosteveGit
JosteveGit committed Mar 16, 2021
1 parent cf94fc0 commit 243db81
Show file tree
Hide file tree
Showing 8 changed files with 355 additions and 176 deletions.
158 changes: 158 additions & 0 deletions a.md
View file
@@ -0,0 +1,158 @@
<!--Some days back, I implemented the Flutterwave's animated card deck from [Flutterwave's landing page](https://flutterwave.com).-->

<!--I shared it on Twitter and thought it'd be a nice idea to write an article on how I implemented it.-->

<!--%[https://www.twitter.com/jostevee/status/1367811531388444677?s=20]-->

<!--So, here it is.-->

<!--We'll be using 3 main widgets: Stack, AnimatedBuilder and Transform.-->

<!--## Set up the flutter project-->

<!--Create a new Flutter project.-->

<!-->flutter create flutterwave_card_deck-->

<!--Open the project using your preferred IDE.-->

<!--## Creating the Card-->

<!--```-->
<!--import 'package:flutter/material.dart';-->

<!--void main() {-->
<!-- runApp(MyApp());-->
<!--}-->

<!--class MyApp extends StatelessWidget {-->
<!-- @override-->
<!-- Widget build(BuildContext context) {-->
<!-- return MaterialApp(-->
<!-- title: 'Flutter Demo',-->
<!-- debugShowCheckedModeBanner: false,-->
<!-- theme: ThemeData(-->
<!-- primarySwatch: Colors.blue,-->
<!-- fontFamily: 'Montserrat'-->
<!-- ),-->
<!-- home: Home(),-->
<!-- );-->
<!-- }-->
<!--}-->

<!--class Home extends StatefulWidget {-->
<!-- @override-->
<!-- _HomeState createState() => _HomeState();-->
<!--}-->

<!--class _HomeState extends State<Home> {-->
<!-- @override-->
<!-- Widget build(BuildContext context) {-->
<!-- return Scaffold(-->
<!-- backgroundColor: Colors.black,-->
<!-- body: Center(-->
<!-- child: Container(-->
<!-- width: 450,-->
<!-- height: 280,-->
<!-- padding: cardPadding,-->
<!-- child: Column(-->
<!-- crossAxisAlignment: CrossAxisAlignment.start,-->
<!-- children: [-->
<!-- Icon(-->
<!-- Icons.masks_rounded,-->
<!-- color: Colors.white,-->
<!-- size: 60,-->
<!-- ),-->
<!-- Transform.translate(-->
<!-- offset: Offset(0, -2),-->
<!-- child: Text(-->
<!-- "Flutter Card",-->
<!-- style: TextStyle(-->
<!-- color: Colors.white,-->
<!-- fontWeight: FontWeight.bold,-->
<!-- ),-->
<!-- ),-->
<!-- ),-->
<!-- Spacer(),-->
<!-- Text(-->
<!-- getCardPan,-->
<!-- textAlign: TextAlign.center,-->
<!-- style: TextStyle(color: Colors.white, fontSize: 25),-->
<!-- ),-->
<!-- Spacer(),-->
<!-- Row(-->
<!-- crossAxisAlignment: CrossAxisAlignment.end,-->
<!-- children: [-->
<!-- Expanded(-->
<!-- child: Column(-->
<!-- crossAxisAlignment: CrossAxisAlignment.start,-->
<!-- children: [-->
<!-- Row(-->
<!-- crossAxisAlignment: CrossAxisAlignment.start,-->
<!-- children: [-->
<!-- Text(-->
<!-- "VALID\nTRU",-->
<!-- style: TextStyle(-->
<!-- color: Colors.white,-->
<!-- fontSize: 10,-->
<!-- ),-->
<!-- ),-->
<!-- SizedBox(width: 10),-->
<!-- Text(-->
<!-- "10/21",-->
<!-- style: TextStyle(-->
<!-- color: Colors.white,-->
<!-- fontSize: 17,-->
<!-- fontWeight: FontWeight.w600,-->
<!-- ),-->
<!-- )-->
<!-- ],-->
<!-- ),-->
<!-- SizedBox(height: 10),-->
<!-- Text(-->
<!-- "JOSTEVE ADEKANBI",-->
<!-- style: TextStyle(-->
<!-- color: Colors.white,-->
<!-- ),-->
<!-- )-->
<!-- ],-->
<!-- ),-->
<!-- ),-->
<!-- Image.asset(-->
<!-- "assets/images/mastercardlogo.png",-->
<!-- height: 30,-->
<!-- )-->
<!-- ],-->
<!-- ),-->
<!-- ],-->
<!-- ),-->
<!-- decoration: BoxDecoration(-->
<!-- borderRadius: BorderRadius.circular(10),-->
<!-- gradient: LinearGradient(-->
<!-- colors: [Colors.pink, Colors.purple],-->
<!-- ),-->
<!-- boxShadow: [-->
<!-- BoxShadow(-->
<!-- color: Colors.grey.withOpacity(0.2),-->
<!-- blurRadius: 1.0,-->
<!-- spreadRadius: 1.0,-->
<!-- ),-->
<!-- ],-->
<!-- ),-->
<!-- ),-->
<!-- ),-->
<!-- );-->
<!-- }-->

<!-- EdgeInsets get cardPadding => EdgeInsets.symmetric(horizontal: 20, vertical: 20);-->

<!-- String get getCardPan {-->
<!-- return ("1234567890181234").replaceAllMapped(-->
<!-- RegExp(r".{4}"), (match) => "${match.group(0)} ");-->
<!-- }-->
<!--}-->
<!--```-->




7 changes: 5 additions & 2 deletions lib/main.dart
View file
@@ -1,3 +1,6 @@
import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterwave_card_deck/pages/playground_page.dart';

Expand All @@ -13,9 +16,9 @@ class MyApp extends StatelessWidget {
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Montserrat'
fontFamily: 'Montserrat',
),
home: PlaygroundPage(),
);
}
}
}
52 changes: 2 additions & 50 deletions lib/pages/playground_page.dart
View file
@@ -1,6 +1,5 @@
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutterwave_card_deck/utils/widgets/animated_card_deck.dart';
import 'package:flutterwave_card_deck/utils/widgets/atm_card.dart';

Expand All @@ -11,49 +10,6 @@ class PlaygroundPage extends StatefulWidget {

class _PlaygroundPageState extends State<PlaygroundPage>
with TickerProviderStateMixin {
AnimationController _moveController;
AnimationController _shiftController;

CurvedAnimation curvedAnimation;

@override
void initState() {
_shiftController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_moveController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
curvedAnimation =
CurvedAnimation(parent: _moveController, curve: Curves.ease);
super.initState();
Timer.periodic(Duration(milliseconds: 3000), (timer) async {
await animate();
});
}

Future<void> animate() async {
await _moveController.forward();
setState(() {
isOut = true;
});
_moveController.reverse();
await Future.delayed(Duration(milliseconds: 300));
_shiftController.forward();
await Future.delayed(Duration(seconds: 1));
_shiftController.reset();
setState(() {
isOut = false;
//Throw the first item to the end of the list
cardsDetailsList.add(cardsDetailsList.removeAt(0));
});
}

@override
void dispose() {
_moveController.dispose();
_shiftController.dispose();
super.dispose();
}

List<ATMCardUIDetails> cardsDetailsList = [
ATMCardUIDetails(
cardIcon: CupertinoIcons.money_dollar_circle,
Expand Down Expand Up @@ -106,14 +62,10 @@ class _PlaygroundPageState extends State<PlaygroundPage>
backgroundColor: Colors.black,
body: Center(
child: AnimatedCardDeck(
moveController: curvedAnimation,
shiftController: _shiftController,
isOut: isOut,
cardsDetailsList: cardsDetailsList,
size: MediaQuery.of(context).size.width / 4.5,
),
),
);
}

bool isOut = false;
}

0 comments on commit 243db81

Please sign in to comment.