The latest articles on DEV Community by AIDXN (@gcaidan). https://dev.to/gcaidan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F121699%2Fc8ca8ebe-90ba-42a1-b14b-70e03d2b7099.jpg https://dev.to/gcaidan en AIDXN Fri, 04 Jan 2019 21:46:21 +0000 https://dev.to/gcaidan/flutter-apple-music-card-ui--5ce4 https://dev.to/gcaidan/flutter-apple-music-card-ui--5ce4 <p>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! </p> <p><em>Note this isn't a Apple Music UI replication, but simply Apple Music inspired.</em></p> <h1> shadowColor vs. boxShadow </h1> <p>The Material Widget has a shadowColor property, but it doesn't have the same look<br> property.</p> <div class="ltag_gist-liquid-tag"> </div> <h1> Here's how it looks! </h1> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nufe8iL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dicm3us5jujjv6g3sllb.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nufe8iL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dicm3us5jujjv6g3sllb.png" alt="Alt text of image"></a></p> <p>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.</p> <p><em>Let's change some properties...</em></p> <p>Let's change the blurRadius: 30.0 and the spreadRadius: 4.0 and see how it looks.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jZACI-oA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ftgk4sj4oc98avd0mad8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jZACI-oA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ftgk4sj4oc98avd0mad8.png" alt="Alt text of image"></a></p> <p>As we can see the spreadRadius broadened up the shadow and the blurRadius increase made for a more fuzzy cotton candy look.</p> <h1> Conclusion </h1> <p>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!</p> flutter ui android ios