Flutter E-Store Tutorial Part 1 | Create a visual effect of 2 containers curving into each other

131 Просмотры
Издатель
I found this cool mockup that @nasyiya.design on Instagram (https://www.instagram.com/p/CPuiTJtrm7w/) made. In particular, I really liked how the border of the white and grey containers looked like they were seamlessly curving into each other.

This video shows how to achieve that effect.

The actual coding required can take just a few minutes but I wanted to try to keep this video as beginner-friendly as possible, introducing why/how we use the layout widgets we used, box decorations, and how you can analyze a UI design/mockup before actually coding it.

Feel free to skip sections not relevant to you or 1.5/2x this video!

Thank you for watching!

Github gist of code: https://gist.github.com/Aldo111/458eb9c888f38e4d5d28d6979d680ad3
My repo for the finished app: https://github.com/Aldo111/estore_flutter_app

You can follow me on instagram @azarrothedev for more bite-sized content related to things like this or just about working in the tech industry.

Timestamps:
0:00 Introduction
0:16 Analyzing the UI Design/Mockup
1:42 Getting Colors from the Design
2:24 Start Coding
8:06 Concluding Thoughts
Категория
Разработка на Flutter
Комментариев нет.