base on Wallet App UI Flutter Workshop # Wallet App A minimalistic, animated Flutter wallet app UI built for the workshop conducted at the [Flutter & Friends conference](https://www.flutterfriends.dev/) in Stockholm, Sweden. In this workshop, you learn how to add animations with gradually increasing complexity to a Flutter Wallet app UI to bring it to life. **📃 Article version coming soon...** ### Chapter 1 - Onboarding Page Introduction to simple implicit and explicit animations by adding simple animations to the onboarding page. 🔗 [Preview the code of the animation](https://github.com/Roaa94/wallet_app_workshop/blob/main/lib/on-boarding/on_boarding_page.dart) https://github.com/Roaa94/wallet_app_workshop/assets/50345358/67ddf8b7-2518-4533-a44a-4d3ac37cb7bd --- ### Chapter 2 - Stack of Dismissible Cards Utilizing user input to implement a stack of animated dismissible cards. Cards can be dragged by the user and can either animate back into place, or get thrown and fade away is a direction that depends on the location the user dragged them to. The cards are implemented such that they infinitely loop with the dismissed card returning to the back of the cards. 🔗 [Preview the code of the animation](https://github.com/Roaa94/wallet_app_workshop/blob/main/lib/credit-cards/credit_cards_page.dart) https://github.com/Roaa94/wallet_app_workshop/assets/50345358/3efad15e-5297-4ffe-90b3-6e3a7f7f9c06 --- ### Chapter 3 - Cards Hero Animation & Custom Page Transitions Implementing custom page transitions and highly customized `Hero` animation. The key here is using the `Hero` widget's `flightShuttleBuilder` parameter to return the animated widget. Because the way the `Hero` widget works with Flutter is that behind the scenes, there are actually 3 widgets, the `child` of the `Hero` widget in the source page, the `child` of the `Hero` widget in the target page, and another widget for the animation hapenning in between, and the `flightShuttleBuilder` is how you can override that widget and perform any animations on it, no matter how complex, with the help of the `Animation` object provided in the parameter's callback. 🔗 [Preview the code of the animation](https://github.com/Roaa94/wallet_app_workshop/blob/main/lib/credit-cards/credit_cards_page.dart) https://github.com/Roaa94/wallet_app_workshop/assets/50345358/0d868308-8fd7-4adb-8cfe-dfc2c3bc4693 --- ### Bonus - Slide to Pay Animation Based on all the concepts covered before, this slide-tp-pay animation includes draging functionality, and uses a mix of implicit and explicit animation widgets. Check it out for some practice! 🔗 [Preview the code of the animation](https://github.com/Roaa94/wallet_app_workshop/blob/main/lib/payment/payment_button.dart) https://github.com/Roaa94/wallet_app_workshop/assets/50345358/376eddd2-9c25-407c-8ef7-348f3be38be8 ", Assign "at most 3 tags" to the expected json: {"id":"10224","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"