Create a Fancy Toast Component Using SwiftUI
Build amazing UIs
Hi fellas, welcome to another SwiftUI article! In this article, we’ll make a fancy toast component quickly and easily in SwiftUI. Who’s excited?
What is toast?
The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. source
Based on UX perspectives:
Toast should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience.
Without further ado, let’s get started!
1. Create a toast view
First, create a SwiftUI view file and name it FancyToastView or whatever. This is the main view for the toast which we will show to the user.
Based on the code above, the toast consists of icons, titles, messages, and close buttons arranged horizontally. For the icons, we will use SFSymbol so you don’t need to import assets to run the code above.
And we use an overlay to make a side list. When you run the code above, the view should be like this:
But… we want the content in the toast to be dynamic. Okay.. next.
2. Create a toast enum style and toast model
We’re going to make 4 styles which are the most common in toasts. The styles are info, error, warning, and success. The differences are usually in the theme color and the icon.
I think the code above is pretty straightforward. We have 4 types, and we use computed property to get theme color and icon file name for each type. So easy!
Next, we will make a model to configure the contents of our toast.
Our model contains type where the type is the enum we created earlier, title and message which is the message content that will be displayed on the toaster, and duration which is the value that determines how long our toaster will appear, and then close it automatically. And also we use Equatable in our model because we want to differentiate one toast from another.
3. Integrate views with models
The next step is to integrate our main view with the model so that our toaster content is dynamic.
Not much difference with the previous one right? we just replace the hardcoded value with the value from the model. If you notice, there is something different. Yes, we use the callback function for the cancel button action, so we want the parent view that will execute the logic to close the toast.
Then try to run it by calling the view like this:
The view should be like this:
One step closer…
4. Create a ViewModifier to show the toast
We want to show our toasts easily, seamlessly and of course reusable. Because we will use this toast in many views in our application. It will be very complicated and also tiring if we create a ZStack and then put the toast in the tp view in each view manually. ViewModifier is a key!
Maybe this is the most complicated and a bit confusing of the many codes above before. But calm down… I’ll try to explain in an easy way.
In this view modifier, there are 2 variables with a different property wrapper.
The first one is toast, which is a toast model that we bind to a toast view with the @Binding property wrapper so that we can mutate the value from the inside and also directly reflect if there is a change in the value from the outside.
And the second one is workItem which is a DispatchWorkItem that will help us to close the toast when the toast time has reached the specified duration. Got it?
We also have 2 view functions and 2 logic functions. I will not discuss the UI code in detail because I’m sure all of you already understand the basics of SwiftUI, nothing is difficult from the code above. Everything is very basic.
We just set the size of the frame content to be infinity which means it fits the device screen, so our toast component will appear as we expect it to be at the bottom of the screen. Then we use overlays and ZStack to place our toast component above the content. We also use the onChange modifier to execute the function that is responsible for showing the toast.
Next for the showToast function, I think it’s pretty straightforward too. Because we just call the UIImpactFeedbackGenerator function to make our toast noticeable and fancier, and then set workItem task and execute it after a specified duration.
The last one is dismissToast, which is also straightforward right? we just set nil to binding toast, then cancel and set nil to our workItem as well to prevent memory leaks.
Is it done? hmmm almost.
The final step to make it easier and fancier is to make a function in the view extension so we use our component to be more “SwiftUI”.
Finally, we are done creating the components and it’s ready to use now!
An example of using the component is below:
Try running it and it should be like this:
Conclusion
Toast is a very common thing in apps, I want to share how to easily make a toast component for those of you who may be clueless about how to make this component in SwiftUI. Or for those of you who already have experience in making this toast component and have anything better, please feel free to discuss it in the comments below.
Next, you can explore for yourself how to create a queue system if there are multiple toasts you want to show and others.
