{"id":8208,"date":"2021-04-16T17:00:12","date_gmt":"2021-04-16T14:00:12","guid":{"rendered":"https:\/\/serialcoder.dev\/?p=8208"},"modified":"2021-04-16T18:40:07","modified_gmt":"2021-04-16T15:40:07","slug":"blur-effect-in-swiftui","status":"publish","type":"post","link":"https:\/\/serialcoder.dev\/text-tutorials\/swiftui\/blur-effect-in-swiftui\/","title":{"rendered":"Blur Effect in SwiftUI"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u23f1 Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">mins<\/span><\/span>\n<p>We all have tried to blur images or entire views in iOS apps from time to time, and in UIKit that wasn&#8217;t the most straightforward or customizable thing in the world. However, applying blur effect in SwiftUI based apps is extremely easy, as all it takes is simply to call a view modifier.<\/p>\n\n\n\n<p>Blur effect can be applied on any view, not just Images, and contrarily to UIKit, we can explicitly specify the blur amount. Even more, we can also change that amount on the fly and create a nice visual effect while updating it.<\/p>\n\n\n\n<p>To demonstrate the topic, suppose we have the the following Text that displays a happy face:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:swift decode:true \">Text(\"????\")\n    .font(.system(size: 70))<\/pre><\/div>\n\n\n\n<p>To blur it, we have call the <code>blur<\/code> view modifier, passing as argument the blur amount:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:swift mark:4 decode:true \">Text(\"????\")\n    .font(.system(size: 70))\n    .blur(radius: 5)<\/pre><\/div>\n\n\n\n<p>However, a fixed blur amount may not always be what we really want. It&#8217;s often necessary to have a varying amount value, so in that case there is an additional step that we have to go through.<\/p>\n\n\n\n<p>At first, we need a property marked with the @State property wrapper that will be indicating the current blur amount. Of course, using a @State property is not mandatory; a different source of truth could be used instead, such as an @ObservedObject or an @EnvironmentObject property. But for the demonstration purposes of this post, a @State property is just fine:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:swift decode:true \">@State private var blurRadius: CGFloat = 5<\/pre><\/div>\n\n\n\n<p>We can now replace the fixed value with the <code>blurRadius<\/code> property:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:swift mark:4 decode:true \">Text(\"????\")\n    .font(.system(size: 70))\n    .blur(radius: blurRadius)<\/pre><\/div>\n\n\n\n<p>To make it possible to change the blur amount on the fly, let&#8217;s add the following Slider in the view:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:swift decode:true \">Slider(value: $blurRadius, in: 0...15)\n    .padding()\n    .frame(width: 200)\n    .accentColor(Color(UIColor.systemTeal))<\/pre><\/div>\n\n\n\n<p>We provide two arguments in the Slider initializer; the binding value of the <code>blurRadius<\/code> property, and a range of values for the blur amount.<\/p>\n\n\n\n<p>Every time the slider will be used, it will be updating the <code>blurRadius<\/code> property with the new respective value, and that will have instant impact on blur effect applied on the Text:<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/serialcoder.dev\/swiftui-posts-images\/swiftui_blur_demo.gif?i=1809355174\" alt=\"Blur effect in SwiftUI demo\"\/><\/figure><\/div>\n\n\n\n<p>So, this is all about applying blur effect in SwiftUI, which admittedly, is a really simple task. Now that you know how to do it, go ahead and use it in your own views. Thank you for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Applying blur effect in SwiftUI is a super-easy task, and this post showcases how to do so, as well as how to change blur amount on the fly.<\/p>\n","protected":false},"author":1,"featured_media":8222,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[410],"tags":[489,490,362],"class_list":["post-8208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swiftui","tag-blur","tag-blur-view","tag-swiftui"],"_links":{"self":[{"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/posts\/8208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/comments?post=8208"}],"version-history":[{"count":0,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/posts\/8208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/media\/8222"}],"wp:attachment":[{"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/media?parent=8208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/categories?post=8208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serialcoder.dev\/wp-json\/wp\/v2\/tags?post=8208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}