Flutter UI Tutorial - Designing Movies Neon App UI Design DesignCode (Figma to Flutter)
Hi everyone, I am Abdul Aziz Ahwan from Indonesia,
In this post, we will learn Figma to Flutter with best practice. Which we are going to create a Movies Neon App UI Design Freebies from DesignCode Figma Community.
A lighting and glowing user interface from scratch using neon style.
Designed by Sourasith
Refer to this ► https://www.figma.com/community/file/1076511483626225352
Video tutorial by @DesignCode ► https://youtu.be/lceG4iKNfEg
And in this section, we will implement many widgets and concepts, such as implement Glassmorphism, Blur Background, Masking Widget and much more. I hope it will be useful to apply to your next project.
This post was made with great effort,
If you want to support me you can donate to the following link
👨🏻💻 BE A SUPPORTER ON YOUTUBE
💰 PAYPAL
🧧 SAWERIA
🪙 TRAKTEER
☕ BUY ME A COFFEE
⚠️ FLUTTER & DART VERSION
- Flutter 2.8.1
- Dart 2.15.1
🔨 PACKAGE FOR THIS PROJECT
- flutter_svg: https://pub.dev/packages/flutter_svg
- glassmorphism: https://pub.dev/packages/glassmorphism
- flutter_rating_bar: https://pub.dev/packages/flutter_rating_bar
- google_fonts: https://pub.dev/packages/google_fonts
🌃 VSCODE THEME
📂 PROJECT FILE
Flutter Starter Code
Part 1
Part 2
📚 REFERENCES
Masking Widget ► https://stackoverflow.com/questions/60468768/masking-two-images-in-flutter-using-a-custom-painter/60470034#60470034
Outline Border with Gradient ► https://stackoverflow.com/questions/66185071/flutter-image-with-gradient-border-color
[ PART 1 ]
[ PART 2 ]
