# SwiftUI: exploring views and modifiers

> Learn how views and modifiers work in SwiftUI, how a modifier like font() returns a brand new view, and why the order you apply modifiers matters.

Author: Flavio Copes | Published: 2021-09-14 | Canonical: https://flaviocopes.com/swiftui-views-modifiers/

In the [introduction to SwiftUI](https://flaviocopes.com/swiftui-introduction/) post I mentioned views.

SwiftUI is all about views.

Remember the Hello World app?

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}
```

`ContentView` is the main view. Its job is to define which views compose our app.

In here, we have a single view, `Text`.

If you run this in Xcode, this is what the app will look like:

![Xcode showing basic SwiftUI app with Hello World text displayed in normal font size on iPhone simulator](https://flaviocopes.com/images/swiftui-views-modifiers/Screen_Shot_2021-09-13_at_09.23.06.png)

> Notice the additional code after the `ContentView` struct: this is how we tell Xcode what to display in the preview panel on the right. It's not part of the app, but it's used in development.

A view can have **modifiers**.

Here's an example of a modifier of the `Text` view, `font()`: 

```swift
struct ContentView: View {
    var body: some View {
        Text("Hello World")
            .font(.largeTitle)
    }
}
```

This modifier takes the `Text` view we created and makes the font larger:

![Same SwiftUI app now showing Hello World text in large title font after applying .largeTitle modifier](https://flaviocopes.com/images/swiftui-views-modifiers/Screen_Shot_2021-09-13_at_09.23.18.png)

Different views can have different modifiers. 

We've just seen the `Text` view so far, and that view has a number of modifiers you can use, including:

- `font()` sets the default font for text in the view
- `background()` sets the view background
- `foregroundColor()` sets the color of the foreground elements displayed by the view
- `padding()` pads the view along all edges

... and many more. In the case of `Text` you can check all the modifiers you can use in this page: <https://developer.apple.com/documentation/swiftui/text-view-modifiers>.

It's important to note that the modifier does not modify the existing view. It actually takes an existing view and creates a new view.

Why is this important? Because this fact causes the order of modifiers to matter.

Suppose you want to set the background of the `Text` view, and then add some padding to it.

```swift
Text("Hello World")
    .padding()
    .background(Color.blue)
```

Here's the result:

![Hello World text with blue background extending beyond the text due to padding applied first then background](https://flaviocopes.com/images/swiftui-views-modifiers/Screen_Shot_2021-09-13_at_10.03.40.png)

but if you invert the 2 modifiers, you get this result:

![Hello World text with blue background only behind text and padding outside the background due to modifier order](https://flaviocopes.com/images/swiftui-views-modifiers/Screen_Shot_2021-09-13_at_10.03.44.png)

This is the consequence of modifiers returning a new view once they are applied, and not modifying the existing view.