SwiftUI Tutorial – How to create a Bar Chart using Neumorphic Design.
Welcome to a new SwiftUI tutorial. We are going to be talking about charts in SwiftUI and how we can create this in Neumorphic Design.
Let’s get started 👍
Let’s open up Xcode and start a new project.
Then call the project BarChart_Neumorphic_SwiftUI or whatever you want, then save the project.
Now we are setup this is what the ContentView looks like.
First, we are going to open up the Assets.xcassets folder. We are going to add in a New Color Set.
Select the new Color and in the Attributes inspector we are looking for the option Appearances. We are going to set this to Any, Dark.
This is going to be our background color for the app. So change the name of the color to Background.
Background Hex:
Any Appearance HEX: #DEEAF6
Dark Appearance HEX: #1A1B1E
Now do that again for two New Color Set’s and call them DarkShadow, LightShadow.
DarkShadow Hex:
Any Appearance HEX: #BECBD8
Dark Appearance HEX: #151518
LightShadow Hex:
Any Appearance HEX: #F3F9FF
Dark Appearance HEX: #242529
Now we have added our colors for Light and Dark Mode we are going to add two more colors for the chart and text.
We are going to call our new colors cards. Here are the Hex Colors for them:
Card1 Hex:
Any Appearance HEX: #6A54FB
Dark Appearance HEX: #F3F8FF
Card2 Hex:
Any Appearance HEX: #13BDFC
Dark Appearance HEX: #6A54FB
Now we have our colors setup we are ready to go! 👌 We are going back into the ContentView and start creating our View.
We are going to use ZStack and inside we are going to create a Rectangle, this is going to be the background.
Now we are going to create a HStack this is where we will be displaying our bar chart in the view.
But first, let’s setup some simple data for our bar chart.
Now we can go back into the HSatck and setup and ForEach method.
This is now where we are going to create our chart. We are going to create a new struct and we are going to call this Bar.
Now we can go back up to the ForEach method and add in the Bar view with the data.
Now we are going to drop down after our frame and padding and create some text.
Awesome this is looking nice 👍 but let’s make our chart better by allowing our user to look at the chart in Light and Dark Mode!
This is the Light Mode in the canvas.
This is the Dark Mode in the canvas.
Conclusion 👏
Awesome, we have now finished this tutorial on how to create a BarChart using Neumorphic Design. We have learnt how to create new color set’s, use ZStack and how to create a Capsule shapes and much more. With this knowledge you should be able to create some dope designs in neumorphic.
If you would like the whole source code of this tutorial GitHub
I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphic Design, check out our YouTube channel for other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram
Thank you all for reading this content.
