Recreate the GitHub Card in Flutter - CSS to Flutter Challange

In todays episode we have a big work todo, we will recreate the beautiful GitHub Card animation layout in #Flutter. First we break down the tasks down what we need to achieve and then we solve each problem. We will first solve how to make the card movable in a 3d space. Then we will add a Spotlight effect to the card. Then we have to add the animated link and last but not least we will implement the Sponsor Cards. Today we are again supported by DCM: https://dcm.lemonsqueezy.com?aff=XA47X If you want to know more checkout the video here: https://youtu.be/ETmPOc7Z4uc If you like my content and like to get even a bit behind the scenes knowledge, I would be very pleased to have you as my Patreons: patreon.com/dev_cafe Relevant Links: Thanks to GitHub for the idea: https://github.com/ Checkout the Demo here: https://flutter-explained-tutorials.web.app/ Source Code: https://www.patreon.com/posts/recreate-github-89599703 Fantastic Article about Transform and Matrix4: https://medium.com/flutter-community/advanced-flutter-matrix4-and-perspective-transformations-a79404a0d828 Timestamps: 00:00 Getting Started 00:13 Task Breakdown 02:09 Implement the Card Movement 16:18 Implement the Spotlight effect 27:45 Adding Rich Text and Formatting 36:21 Implementing the Link Button Animation 46:39 Adding the Sponsorship Grid 01:06:09 Review and Summary ----------------------------------------------------------------------------------- YOUTUBE ►► https://youtube.com/c/flutterexplained KICK ►► https://kick.com/devcafe MASTODON ►► https://procial.tchncs.de/@max MATRIX ►►https://bit.ly/flutter_explained_matrix DISCORD ►► https://discord.gg/TRSY4tGHpd INSTAGRAM ►► https://www.instagram.com/flutterexplained/reels/ ----------------------------------------------------------------------------------- My Streaming Setup ►► https://kit.co/flutter_exp/flutter-explaines-streaming-kit ----------------------------------------------------------------------------------- Other Videos: Client & Server Architecture: https://youtu.be/kYM-wlOhQ3I Files and Folder Structure in Flutter & Dart: https://youtu.be/wR1cMW1hSzM Realtime Communication with WebRTC: https://youtu.be/hAKQzNQmNe0 Why I love Flutter: https://youtu.be/fSn9xK7YCvY ----------------------------------------------------------------------------------- #Flutter #Coding #tutorial