'%20fill-opacity='0.7'/%3e%3cmask%20id='mask0_4854_96'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='89'%20y='0'%20width='141'%20height='230'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M89.5771%200.274414H229.719V229.612H89.5771V0.274414Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_4854_96)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M194.012%20229.612H177.057C173.456%20229.612%20170.537%20226.699%20170.537%20223.107C170.537%20219.514%20173.456%20216.602%20177.057%20216.602H194.012C206.51%20216.602%20216.679%20206.456%20216.679%20193.986V35.9005C216.679%2023.4308%20206.51%2013.2846%20194.012%2013.2846H96.0975C92.4964%2013.2846%2089.5771%2010.3725%2089.5771%206.77952C89.5771%203.18659%2092.4964%200.274414%2096.0975%200.274414H194.012C213.701%200.274414%20229.72%2016.2558%20229.72%2035.9005V193.986C229.72%20213.631%20213.701%20229.612%20194.012%20229.612Z'%20fill='%23232121'/%3e%3c/g%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M129.79%20230H35.6338C15.9849%20230%200%20213.973%200%20194.271V115V35.729C0%2016.0275%2015.9849%200%2035.6338%200H50.2769C53.8707%200%2056.7839%202.92059%2056.7839%206.52389C56.7839%2010.1272%2053.8707%2013.0478%2050.2769%2013.0478H35.6338C23.1613%2013.0478%2013.0132%2023.2229%2013.0132%2035.729V194.271C13.0132%20206.777%2023.1609%20216.952%2035.6338%20216.952H129.79C133.383%20216.952%20136.296%20219.873%20136.296%20223.476C136.296%20227.079%20133.383%20230%20129.79%20230Z'%20fill='%23232121'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M40%20113.56C40%20146.501%2061.4878%20174.444%2091.2907%20184.303C95.0431%20184.989%2096.4106%20182.687%2096.4106%20180.71C96.4106%20178.943%2096.3461%20174.251%2096.3093%20168.031C75.4477%20172.535%2071.0461%20158.035%2071.0461%20158.035C67.6344%20149.421%2062.7171%20147.128%2062.7171%20147.128C55.9075%20142.505%2063.2328%20142.597%2063.2328%20142.597C70.7606%20143.123%2074.7202%20150.282%2074.7202%20150.282C81.4101%20161.674%2092.276%20158.383%2096.5487%20156.474C97.2301%20151.659%2099.1685%20148.373%20101.309%20146.51C84.6561%20144.629%2067.1463%20138.23%2067.1463%20109.66C67.1463%20101.522%2070.07%2094.8628%2074.8676%2089.6541C74.094%2087.7683%2071.5203%2080.1842%2075.6042%2069.9225C75.6042%2069.9225%2081.8982%2067.9177%2096.2264%2077.5661C102.207%2075.9092%20108.625%2075.0854%20115.002%2075.0533C121.375%2075.0854%20127.788%2075.9092%20133.778%2077.5661C148.097%2067.9177%20154.382%2069.9225%20154.382%2069.9225C158.475%2080.1842%20155.901%2087.7683%20155.132%2089.6541C159.939%2094.8628%20162.84%20101.522%20162.84%20109.66C162.84%20138.303%20145.302%20144.606%20128.598%20146.451C131.287%20148.753%20133.686%20153.302%20133.686%20160.259C133.686%20170.224%20133.594%20178.266%20133.594%20180.71C133.594%20182.705%20134.948%20185.026%20138.751%20184.298C168.531%20174.416%20190%20146.492%20190%20113.56C190%2072.3803%20156.417%2039%20114.993%2039C73.583%2039%2040%2072.3803%2040%20113.56Z'%20fill='%23232121'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4854_96'%20x1='51'%20y1='368.375'%20x2='179'%20y2='368.375'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235996F5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.52'%20stop-color='%23E80065'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.999299'%20stop-color='%23F06145'%20stop-opacity='0.8'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Explore more
Proud Dad, iOS Engineer, Flutter Dev, Motorcycle Enthusiast, and avid reader.
February 10, 2024 - 3 minute read
Using View Modifiers in SwiftUI
How to use and create your own view modifiers in SwiftUI
Code bender
Checkout the latest episode of
Meet the Developer
Meet the Developer
Have any questions or suggestions? Send us an email at team@devbits.ph
'%20fill-opacity='0.7'/%3e%3cpath%20id='Fill%203'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M99.2635%20216.858H121.309V155.652C121.309%20152.022%20124.198%20149.08%20127.762%20149.08H143.78C146.744%20149.08%20149.526%20147.899%20151.611%20145.753C153.697%20143.609%20154.831%20140.765%20154.801%20137.746C154.743%20131.616%20149.798%20126.629%20143.779%20126.629H127.761C124.197%20126.629%20121.309%20123.687%20121.309%20120.058V95.3174C121.309%2084.7973%20129.713%2076.2386%20140.043%2076.2386H145.912C151.019%2076.2386%20155.174%2072.0075%20155.174%2066.8058C155.174%2061.6045%20151.02%2057.373%20145.912%2057.373H131.461C113.707%2057.373%2099.2631%2072.0826%2099.2631%2090.1628V120.057C99.2631%20123.686%2096.3741%20126.628%2092.8105%20126.628H81.4306C75.353%20126.628%2070.408%20131.663%2070.408%20137.854C70.408%20144.043%2075.353%20149.079%2081.4306%20149.079H92.8105C96.3741%20149.079%2099.2631%20152.021%2099.2631%20155.65V216.858H99.2635ZM127.759%20230.003H92.8076C89.2441%20230.003%2086.3554%20227.06%2086.3554%20223.431V162.225H81.4281C68.2345%20162.225%2057.5%20151.293%2057.5%20137.857C57.5%20124.42%2068.2341%20113.488%2081.4281%20113.488H86.3554V90.1659C86.3554%2064.8385%20106.589%2044.2334%20131.458%2044.2334H145.909C158.133%2044.2334%20168.077%2054.3604%20168.077%2066.8089C168.077%2079.2562%20158.133%2089.3837%20145.909%2089.3837H140.04C136.826%2089.3837%20134.211%2092.0471%20134.211%2095.3205V113.489H143.776C156.843%20113.489%20167.577%20124.315%20167.704%20137.621C167.766%20144.174%20165.307%20150.348%20160.778%20155.004C156.249%20159.66%20150.211%20162.225%20143.776%20162.225H134.211V223.431C134.212%20227.06%20131.323%20230.003%20127.759%20230.003Z'%20fill='%23232121'/%3e%3cg%20id='Group%207'%3e%3cmask%20id='mask0_4679_240'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='88'%20y='0'%20width='142'%20height='230'%3e%3cpath%20id='Clip%206'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M88.5938%200.274414H229.716V229.612H88.5938V0.274414Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_4679_240)'%3e%3cpath%20id='Fill%205'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M193.759%20229.612H176.685C173.059%20229.612%20170.12%20226.699%20170.12%20223.107C170.12%20219.514%20173.059%20216.602%20176.685%20216.602H193.759C206.344%20216.602%20216.585%20206.456%20216.585%20193.986V35.9005C216.585%2023.4308%20206.345%2013.2846%20193.759%2013.2846H95.1597C91.5334%2013.2846%2088.5938%2010.3725%2088.5938%206.77952C88.5938%203.18659%2091.5334%200.274414%2095.1597%200.274414H193.759C213.586%200.274414%20229.716%2016.2558%20229.716%2035.9005V193.986C229.716%20213.631%20213.586%20229.612%20193.759%20229.612Z'%20fill='%23232121'/%3e%3c/g%3e%3c/g%3e%3cpath%20id='Fill%208'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M130.57%20230H35.8479C16.081%20230%200%20213.973%200%20194.271V35.729C0%2016.0275%2016.081%200%2035.8479%200H50.5791C54.1944%200%2057.1251%202.92059%2057.1251%206.52389C57.1251%2010.1272%2054.1944%2013.0478%2050.5791%2013.0478H35.8479C23.3004%2013.0478%2013.0914%2023.2229%2013.0914%2035.729V194.271C13.0914%20206.777%2023.3001%20216.952%2035.8479%20216.952H130.57C134.185%20216.952%20137.115%20219.873%20137.115%20223.476C137.115%20227.079%20134.185%20230%20130.57%20230Z'%20fill='%23232121'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4679_240'%20x1='66.3438'%20y1='456.058'%20x2='163.651'%20y2='456.058'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235996F5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.52'%20stop-color='%23E80065'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.999299'%20stop-color='%23F06145'%20stop-opacity='0.8'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cg%20id='Group'%3e%3cpath%20id='Vector'%20d='M194.271%20233.554H177.305C173.703%20233.554%20170.781%20230.588%20170.781%20226.929C170.781%20223.27%20173.703%20220.304%20177.305%20220.304H194.271C206.777%20220.304%20216.952%20209.972%20216.952%20197.273V36.2812C216.952%2023.5821%20206.777%2013.2496%20194.271%2013.2496H96.2979C92.6952%2013.2496%2089.7739%2010.2837%2089.7739%206.62481C89.7739%202.96595%2092.6952%200%2096.2979%200H194.271C213.972%200%20230%2016.2753%20230%2036.2812V197.273C230%20217.279%20213.972%20233.554%20194.271%20233.554Z'%20fill='%23232121'/%3e%3cpath%20id='Vector_2'%20d='M130.136%20233.554H35.729C16.0276%20233.554%200%20217.279%200%20197.273V36.2812C0%2016.2753%2016.0276%200%2035.729%200H50.4112C54.014%200%2056.9352%202.96595%2056.9352%206.62481C56.9352%2010.2837%2054.014%2013.2496%2050.4112%2013.2496H35.729C23.2232%2013.2496%2013.048%2023.5817%2013.048%2036.2812V197.273C13.048%20209.972%2023.2228%20220.304%2035.729%20220.304H130.136C133.738%20220.304%20136.66%20223.27%20136.66%20226.929C136.66%20230.588%20133.738%20233.554%20130.136%20233.554Z'%20fill='%23232121'/%3e%3c/g%3e%3cpath%20id='Vector_3'%20d='M161.54%2046.5537H68.463C55.972%2046.5537%2045.8462%2056.836%2045.8462%2069.52V164.035C45.8462%20176.719%2055.972%20187.001%2068.463%20187.001H161.54C174.031%20187.001%20184.156%20176.719%20184.156%20164.035V69.5195C184.157%2056.8356%20174.031%2046.5537%20161.54%2046.5537ZM115.002%20150.889C96.4497%20150.889%2081.4094%20135.617%2081.4094%20116.777C81.4094%2097.9379%2096.4492%2082.6656%20115.002%2082.6656C133.555%2082.6656%20148.594%2097.9379%20148.594%20116.777C148.594%20135.617%20133.554%20150.889%20115.002%20150.889Z'%20fill='url(%23paint0_linear_4679_467)'%20fill-opacity='0.7'/%3e%3cg%20id='Group_2'%3e%3cpath%20id='Vector_4'%20d='M161.537%20193.626H68.4611C52.3926%20193.626%2039.3203%20180.352%2039.3203%20164.035V69.5198C39.3203%2053.2034%2052.3926%2039.9287%2068.4611%2039.9287H161.537C177.606%2039.9287%20190.678%2053.203%20190.678%2069.5198V164.035C190.678%20180.351%20177.605%20193.626%20161.537%20193.626ZM68.4611%2053.1788C59.5872%2053.1788%2052.3683%2060.5093%2052.3683%2069.5203V164.035C52.3683%20173.046%2059.5872%20180.377%2068.4611%20180.377H161.537C170.411%20180.377%20177.63%20173.046%20177.63%20164.035V69.5198C177.63%2060.5093%20170.411%2053.1783%20161.537%2053.1783H68.4611V53.1788ZM114.999%20157.514C92.8788%20157.514%2074.8826%20139.24%2074.8826%20116.778C74.8826%2094.3153%2092.8788%2076.0411%20114.999%2076.0411C137.12%2076.0411%20155.116%2094.3153%20155.116%20116.778C155.116%20139.24%20137.12%20157.514%20114.999%20157.514ZM114.999%2089.2907C100.073%2089.2907%2087.9311%20101.621%2087.9311%20116.778C87.9311%20131.934%20100.073%20144.264%20114.999%20144.264C129.925%20144.264%20142.068%20131.934%20142.068%20116.778C142.068%20101.621%20129.924%2089.2907%20114.999%2089.2907Z'%20fill='%23232121'/%3e%3cpath%20id='Vector_5'%20d='M155.612%2084.368C160.686%2084.368%20164.798%2080.1917%20164.798%2075.0399C164.798%2069.8882%20160.686%2065.7119%20155.612%2065.7119C150.539%2065.7119%20146.426%2069.8882%20146.426%2075.0399C146.426%2080.1917%20150.539%2084.368%20155.612%2084.368Z'%20fill='%23232121'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4679_467'%20x1='45.8462'%20y1='374.655'%20x2='184.156'%20y2='374.655'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235996F5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.52'%20stop-color='%23E80065'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.999299'%20stop-color='%23F06145'%20stop-opacity='0.8'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_4679_467'%3e%3crect%20width='230'%20height='233.554'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
