Uploaded September 2023 | Updated September 2026, 8 hours ago

---

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: 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: github.com
Checkout the Demo here: https://flutter-explained-tutorials.web.app/

Source Code: patreon.com/posts/recreate-github-89599703

Fantastic Article about Transform and Matrix4:
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 ►► youtube.com/c/flutterexplained
KICK ►► kick.com/devcafe
MASTODON ►► procial.tchncs.de/@max
MATRIX ►►bit.ly/flutter_explained_matrix
DISCORD ►► discord.gg/TRSY4tGHpd
INSTAGRAM ►► instagram.com/flutterexplained/reels
-----------------------------------------------------------------------------------

My Streaming Setup ►► kit.co/flutter_exp/flutter-explaines-streaming-kit

-----------------------------------------------------------------------------------

Other Videos:
Client & Server Architecture: youtu.be/kYM-wlOhQ3I
Files and Folder Structure in Flutter & Dart: youtu.be/wR1cMW1hSzM
Realtime Communication with WebRTC: youtu.be/hAKQzNQmNe0
Why I love Flutter: youtu.be/fSn9xK7YCvY

-----------------------------------------------------------------------------------

#Flutter #Coding #tutorial