DEV Community

AIDXN
AIDXN

Posted on

8

Flutter: Apple Music Card UI

Flutter is great and building beautiful Uľ's is a breeze. In this tutorial I will show you how to get the Apple Music Card look with the colored drop shadow. Let's get started!

Note this isn't a Apple Music UI replication, but simply Apple Music inspired.

shadowColor vs. boxShadow

The Material Widget has a shadowColor property, but it doesn't have the same look
property.

Here's how it looks!

Alt text of image

This is what our card looks like now! You can customize this to fit your app’s theme by changing the blur and spread radius as well as the color.

Let's change some properties...

Let's change the blurRadius: 30.0 and the spreadRadius: 4.0 and see how it looks.

Alt text of image

As we can see the spreadRadius broadened up the shadow and the blurRadius increase made for a more fuzzy cotton candy look.

Conclusion

Today I showed you a brief overview of the boxShadow property in which to show you how to make colorful Cards come to life. In essence you can tweak the settings to your liking and wahlah!

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay