I've been using SwiftUI for a while now - I actually use it a lot more than I use Flutter these days. Up until recently I had been sizing my Image views with the frame
modifier but this post is about using the imageScale
modifier instead.
I realized a couple of weeks back that some of the Buttons
in my app's toolbar were kind of hard to tap. I did some searching on Google and realized that there is actually preset sizes you can use for Image
. You don't need to use the frame
or resizable
modifiers either. It won't be viable for all use cases but it makes things more concise and easier to read in my opinion. Here's an example of an Image I'm now using in a custom back button:
1Image(systemName: "chevron.backward").imageScale(.large)
The imageScale
modifier accepts three different options: .large, .medium and .small.
1HStack(spacing: 20) {2 Image(systemName: "chevron.backward").imageScale(.large)3 Image(systemName: "chevron.backward").imageScale(.medium)4 Image(systemName: "chevron.backward").imageScale(.small)5}
I think .large is intended for stuff like buttons and .medium/.small are more for icon use cases. I did end up using .medium in a couple of different places for buttons - maybe it works best for buttons in the toolbar. Like I said it won't be viable for all cases - for example sometimes .small wasn't small enough for my taste - but I would say I was able to replace a lot of code with this. Around 90% of my Image
views now use imageScale
for sizing. I wish I had stumbled upon this one sooner!