From 31fdaa139c7870137bfeee46354821f0599e1461 Mon Sep 17 00:00:00 2001 From: Ashutosh Singh Date: Sun, 26 Sep 2021 14:39:15 +0530 Subject: [PATCH] Add lottie animations --- README.md | 2 ++ assets/dustbin.json | 1 + assets/dustbin_grey.json | 1 + lib/src/widgets/lottie_animation.dart | 44 +++++++++++++++++++++++++++ lib/src/widgets/record_button.dart | 30 +++++++++++++----- pubspec.lock | 14 +++++++++ pubspec.yaml | 6 ++-- 7 files changed, 88 insertions(+), 10 deletions(-) create mode 100644 assets/dustbin.json create mode 100644 assets/dustbin_grey.json create mode 100644 lib/src/widgets/lottie_animation.dart diff --git a/README.md b/README.md index 500ef86..b8ff3dd 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ The project makes use of the following open source packages - [permission_handler](https://pub.dev/packages/permission_handler) - A package to handle audio/storage permissions from the user. - [path_provider](https://pub.dev/packages/path_provider) - path_provider provides path to application document and cache storage directories to store application specific data. - [record](https://pub.dev/packages/record) - Audio recorder from microphone to a given file path with multiple codecs, bit rate and sampling rate options. +- [flutter_vibrate](https://pub.dev/packages/flutter_vibrate) - A simple plugin to control haptic feedback on iOS and android. +- [lottie](https://pub.dev/packages/lottie) - To add lottie animation to the application. ## Build and run locally diff --git a/assets/dustbin.json b/assets/dustbin.json new file mode 100644 index 0000000..f8f80a6 --- /dev/null +++ b/assets/dustbin.json @@ -0,0 +1 @@ +{"v":"5.4.3","fr":50,"ip":0,"op":72,"w":1400,"h":1600,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"bin Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[100],"e":[100]},{"t":57}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0],"e":[-81]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[-81],"e":[-81]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":43,"s":[-81],"e":[0]},{"t":57}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[255.55,1893.173,0],"e":[255.55,613.173,0],"to":[0,-213.33332824707,0],"ti":[5.66666650772095,163.666656494141,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[255.55,613.173,0],"e":[221.55,911.173,0],"to":[-5.66666650772095,-163.666656494141,0],"ti":[5.66666650772095,-49.6666679382324,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[221.55,911.173,0],"e":[221.55,911.173,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":43,"s":[221.55,911.173,0],"e":[255.55,613.173,0],"to":[5.66666650772095,-49.6666679382324,0],"ti":[-5.66666650772095,-243.66667175293,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":57,"s":[255.55,613.173,0],"e":[255.55,2373.173,0],"to":[5.66666650772095,243.66667175293,0],"ti":[0,-293.333343505859,0]},{"t":72}],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[1,161,0],"e":[1,161,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[1,161,0],"e":[1,175,0],"to":[0,2.33333325386047,0],"ti":[0,-2.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[1,175,0],"e":[1,175,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":43,"s":[1,175,0],"e":[1,161,0],"to":[0,-2.33333325386047,0],"ti":[0,2.33333325386047,0]},{"t":57}],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[100,100,100],"e":[100,100,100]},{"t":57}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-25.588,0],[0,0],[-9.322,-20.438]],"o":[[9.325,-20.438],[0,0],[25.663,0],[0,0]],"v":[[-140.585,23.199],[-83.519,-11.787],[85.518,-11.787],[142.658,23.199]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[66.467,0],[0,0],[11.114,-57.737],[0,0],[0,0],[0,0]],"o":[[0,0],[-11.337,-57.737],[0,0],[-66.693,0],[0,0],[0,0],[0,0],[0,0]],"v":[[444.778,23.199],[218.674,23.199],[85.518,-78.848],[-83.219,-78.848],[-216.375,23.199],[-442.778,23.199],[-442.778,78.848],[444.778,78.848]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[445.222,80.849],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"dust Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[100],"e":[100]},{"t":57}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[0],"e":[0]},{"t":57}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[697.29,2393.332,0],"e":[697.29,1113.332,0],"to":[0,-213.33332824707,0],"ti":[0,213.33332824707,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":56,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,5.69661494864704e-7,0],"ti":[0,-293.333343505859,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":57,"s":[697.29,1113.332,0],"e":[697.29,2873.332,0],"to":[0,293.333343505859,0],"ti":[0,-293.333343505859,0]},{"t":72}],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":56,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":57}],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":25,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":56,"s":[100,100,100],"e":[100,100,100]},{"t":57}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-210.999,-293.839],[-138.118,-293.839],[-138.118,285.108],[-210.999,285.108]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.022,-293.839],[37.858,-293.839],[37.858,285.108],[-35.022,285.108]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[160.571,-293.839],[233.376,-293.839],[233.376,285.108],[160.571,285.108]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,0],[0,-17.158],[0,0],[-54.159,0],[0,0],[0,49.535],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,49.535],[0,0],[54.232,0],[0,0],[0,-17.158],[0,0],[0,0],[0,0]],"v":[[-408.233,-397.603],[-377.35,-351.278],[-377.35,398.794],[-279.477,488.537],[279.405,488.537],[377.35,398.794],[377.35,-351.278],[408.233,-397.603],[408.233,-488.537],[-408.233,-488.537]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[446.259,490.705],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/assets/dustbin_grey.json b/assets/dustbin_grey.json new file mode 100644 index 0000000..2975fa5 --- /dev/null +++ b/assets/dustbin_grey.json @@ -0,0 +1 @@ +{"v":"5.4.3","fr":50,"ip":0,"op":72,"w":1400,"h":1600,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"bin Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[100],"e":[100]},{"t":57}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0],"e":[-81]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[-81],"e":[-81]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":43,"s":[-81],"e":[0]},{"t":57}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[255.55,1893.173,0],"e":[255.55,613.173,0],"to":[0,-213.33332824707,0],"ti":[5.66666650772095,163.666656494141,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[255.55,613.173,0],"e":[221.55,911.173,0],"to":[-5.66666650772095,-163.666656494141,0],"ti":[5.66666650772095,-49.6666679382324,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[221.55,911.173,0],"e":[221.55,911.173,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":43,"s":[221.55,911.173,0],"e":[255.55,613.173,0],"to":[5.66666650772095,-49.6666679382324,0],"ti":[-5.66666650772095,-243.66667175293,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":57,"s":[255.55,613.173,0],"e":[255.55,2373.173,0],"to":[5.66666650772095,243.66667175293,0],"ti":[0,-293.333343505859,0]},{"t":72}],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[1,161,0],"e":[1,161,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[1,161,0],"e":[1,175,0],"to":[0,2.33333325386047,0],"ti":[0,-2.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[1,175,0],"e":[1,175,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":43,"s":[1,175,0],"e":[1,161,0],"to":[0,-2.33333325386047,0],"ti":[0,2.33333325386047,0]},{"t":57}],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[100,100,100],"e":[100,100,100]},{"t":57}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-25.588,0],[0,0],[-9.322,-20.438]],"o":[[9.325,-20.438],[0,0],[25.663,0],[0,0]],"v":[[-140.585,23.199],[-83.519,-11.787],[85.518,-11.787],[142.658,23.199]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[66.467,0],[0,0],[11.114,-57.737],[0,0],[0,0],[0,0]],"o":[[0,0],[-11.337,-57.737],[0,0],[-66.693,0],[0,0],[0,0],[0,0],[0,0]],"v":[[444.778,23.199],[218.674,23.199],[85.518,-78.848],[-83.219,-78.848],[-216.375,23.199],[-442.778,23.199],[-442.778,78.848],[444.778,78.848]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.5019607843137255,0.5019607843137255,0.5019607843137255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[445.222,80.849],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"dust Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[100],"e":[100]},{"t":57}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[0],"e":[0]},{"t":57}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[697.29,2393.332,0],"e":[697.29,1113.332,0],"to":[0,-213.33332824707,0],"ti":[0,213.33332824707,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":56,"s":[697.29,1113.332,0],"e":[697.29,1113.332,0],"to":[0,5.69661494864704e-7,0],"ti":[0,-293.333343505859,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":57,"s":[697.29,1113.332,0],"e":[697.29,2873.332,0],"to":[0,293.333343505859,0],"ti":[0,-293.333343505859,0]},{"t":72}],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":17,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":25,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":56,"s":[444,490.5,0],"e":[444,490.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":57}],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":25,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":56,"s":[100,100,100],"e":[100,100,100]},{"t":57}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-210.999,-293.839],[-138.118,-293.839],[-138.118,285.108],[-210.999,285.108]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.022,-293.839],[37.858,-293.839],[37.858,285.108],[-35.022,285.108]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[160.571,-293.839],[233.376,-293.839],[233.376,285.108],[160.571,285.108]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,0],[0,-17.158],[0,0],[-54.159,0],[0,0],[0,49.535],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,49.535],[0,0],[54.232,0],[0,0],[0,-17.158],[0,0],[0,0],[0,0]],"v":[[-408.233,-397.603],[-377.35,-351.278],[-377.35,398.794],[-279.477,488.537],[279.405,488.537],[377.35,398.794],[377.35,-351.278],[408.233,-397.603],[408.233,-488.537],[-408.233,-488.537]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.5019607843137255,0.5019607843137255,0.5019607843137255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[446.259,490.705],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":72,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/lib/src/widgets/lottie_animation.dart b/lib/src/widgets/lottie_animation.dart new file mode 100644 index 0000000..100d2a1 --- /dev/null +++ b/lib/src/widgets/lottie_animation.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; + +class LottieAnimation extends StatefulWidget { + const LottieAnimation({Key? key}) : super(key: key); + + @override + State createState() => _LottieAnimationState(); +} + +class _LottieAnimationState extends State + with SingleTickerProviderStateMixin { + late AnimationController controller; + + @override + void initState() { + super.initState(); + controller = AnimationController(vsync: this); + } + + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + child: Lottie.asset( + 'assets/dustbin_grey.json', + controller: controller, + onLoaded: (composition) { + controller + ..duration = composition.duration + ..forward(); + debugPrint("Lottie Duration: ${composition.duration}"); + }, + height: 40, + width: 40, + ), + ); + } +} diff --git a/lib/src/widgets/record_button.dart b/lib/src/widgets/record_button.dart index 0ba23a6..de42c40 100644 --- a/lib/src/widgets/record_button.dart +++ b/lib/src/widgets/record_button.dart @@ -4,6 +4,7 @@ import 'dart:io'; import 'package:audio_chat/src/audio_state.dart'; import 'package:audio_chat/src/globals.dart'; import 'package:audio_chat/src/widgets/flow_shader.dart'; +import 'package:audio_chat/src/widgets/lottie_animation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_vibrate/flutter_vibrate.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; @@ -35,7 +36,9 @@ class _RecordButtonState extends State { Timer? timer; String recordDuration = "00:00"; late Record record; + bool isLocked = false; + bool showLottie = false; @override void initState() { @@ -143,7 +146,7 @@ class _RecordButtonState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.max, children: [ - Text(recordDuration), + showLottie ? const LottieAnimation() : Text(recordDuration), const SizedBox(width: size), FlowShader( child: Row( @@ -239,7 +242,6 @@ class _RecordButtonState extends State { }, onLongPressEnd: (details) async { debugPrint("onLongPressEnd"); - widget.controller.reverse(); if (isCancelled(details.localPosition, context)) { Vibrate.feedback(FeedbackType.heavy); @@ -249,12 +251,22 @@ class _RecordButtonState extends State { startTime = null; recordDuration = "00:00"; - debugPrint("Cancelled recording"); - var filePath = await record.stop(); - debugPrint(filePath); - File(filePath!).delete(); - debugPrint("Deleted $filePath"); + setState(() { + showLottie = true; + }); + + Timer(const Duration(milliseconds: 1440), () async { + widget.controller.reverse(); + debugPrint("Cancelled recording"); + var filePath = await record.stop(); + debugPrint(filePath); + File(filePath!).delete(); + debugPrint("Deleted $filePath"); + showLottie = false; + }); } else if (checkIsLocked(details.localPosition)) { + widget.controller.reverse(); + Vibrate.feedback(FeedbackType.heavy); debugPrint("Locked recording"); debugPrint(details.localPosition.dy.toString()); @@ -262,6 +274,8 @@ class _RecordButtonState extends State { isLocked = true; }); } else { + widget.controller.reverse(); + Vibrate.feedback(FeedbackType.success); timer?.cancel(); @@ -312,6 +326,6 @@ class _RecordButtonState extends State { } bool isCancelled(Offset offset, BuildContext context) { - return (offset.dx < -(MediaQuery.of(context).size.width * 0.3)); + return (offset.dx < -(MediaQuery.of(context).size.width * 0.2)); } } diff --git a/pubspec.lock b/pubspec.lock index 38e8bb0..fa6df27 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1,6 +1,13 @@ # Generated by pub # See https://dart.dev/tools/pub/glossary#lockfile packages: + archive: + dependency: transitive + description: + name: archive + url: "https://pub.dartlang.org" + source: hosted + version: "3.1.2" async: dependency: transitive description: @@ -156,6 +163,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.0.1" + lottie: + dependency: "direct main" + description: + name: lottie + url: "https://pub.dartlang.org" + source: hosted + version: "1.2.1" matcher: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 31e3522..f3dc3d0 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -35,6 +35,7 @@ dependencies: path_provider: ^2.0.5 record: ^3.0.0 flutter_vibrate: ^1.1.0 + lottie: ^1.2.1 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. @@ -63,8 +64,9 @@ flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg + assets: + - assets/dustbin.json + - assets/dustbin_grey.json # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see