In 2019 with iOS 13, Apple introduced the so loved dark mode and since then we all use it and develop apps taking into account a second set of colours.
Usually it is the user who decides whether to enable the dark mode or not.
But there are some situation where a particular screen needs to use only the **light** or **dark** color scheme.
## Usage
To achieve this result in SwiftUI is really simple. All we need to do is to use the `environment()` modifier on the view we need to use a specific color scheme.
```swift
Text("Thin Material")
	.padding()
	.foregroundStyle(.primary)
	.background(.thinMaterial)
	.environment(\.colorScheme, .dark)
```
> Here we forced the dark mode on a **material**, to learn more about materials you can read [this article](background-blur-with-materials-in-swiftui).
## Availability
This modifier is available to any `View` object.
To apply a specific color scheme to the entire app, it can be applied to the root view.
```swift
var body: some Scene {
  WindowGroup {
    NavigationView {
      
    }
    .environment(\.colorScheme, .dark)
  }
}
```
!WARNING It does not work if applied to the `WindowGroup`.

In this article we are going to learn how to apply a specific colour scheme to a View regardless of the system dark mode.

Force Dark Mode to View in SwiftUI

Sometimes we need to add text on top of an image and, to make it stand out, it is useful to add a background that is in harmony with the image underneath.
Luckily, this task is made significantly simple with SwiftUI and can be achieved with the use of **materials**.
![Screenshot-2023-11-29-at-11.38.24-2.webp](https://media.graphassets.com/BYM3dK9TGaOpEJYWyXag)
A material is not a view, is like inserting a translucent layer between the modified view and its background.
The blurring effect produced by the material isn’t simple transparency. It uses a platform-specific blending that produces a result that resembles frosted glass.
## Materials
SwiftUI has a set of **materials** with different thicknesses. Thicker materials give better contrast for text and other views.
Materials available in SwiftUI are:
* regular material
* thin material
* ultra-thin material
* thick material
* ultra-thick material
* bar
## Usage
To apply a material to a view background, you need to use the `background(_:ignoresSafeAreaEdges:)` modifier.
```swift
Text("Ultra thin material")
   .background(.ultraThinMaterial)
```
## Shaped material
To shape the background material you can use the `background(_:in:fillStyle:)` modifier.
Passing a `Shape` object to the second parameter of the modifier.
```swift
Text("Ultra thin material")
   .background(
      .ultraThinMaterial,
      in: RoundedRectangle(cornerRadius: 8, style: .continuous)
   )
```
## Dark mode
These materials automatically support both the light and dark modes.

Here is a list of all the available materials in SwiftUI.
![Screenshot-2023-11-29-at-09.43.21.webp](https://media.graphassets.com/wJYw29rgTlnvNp6Q0IMA)

Discover how to create a background blur effect and give more importance to your text in SwiftUI using the new materials.

Background Blur with Materials in SwiftUI

## Apply the styling
The `Text` view allows us to display strings in SwiftUI.
SwiftUI provides many modifiers to style it according to what we need and today we will focus on one style that can be applied.
The **hierarchical style**.
This property can be applied using the `.foregroundStyle(_)` modifier.
It has 5 levels: `.primary`, `.secondary`, `.tertiary`, `.quaternary` and `.quinary`.
```swift
VStack(alignment: .center) {
	Text("Primary")
		.foregroundStyle(.primary)
	Text("Secondary")
		.foregroundStyle(.secondary)
	Text("Tertiary")
		.foregroundStyle(.tertiary)
	Text("Quaternary")
		.foregroundStyle(.quaternary)
	Text("Quinary")
		.foregroundStyle(.quinary)
}
.foregroundStyle(.purple)
```
Here the `.secondary` style dims the `foregroundColor` applied to the `VStack`.
![Screenshot-2023-11-21-at-16.45.51.webp](https://media.graphassets.com/pOotIjhbSBWQZyoaBYYD)
## Compatibility
The **hierarchical styles** can dim every **custom color**, not only SwiftUI default ones.
And it works not only with `Text` but also with `Shape`, `Button`, `Stacks`, `Image` and `Label`.
![Screenshot-2023-11-21-at-16.46.17.webp](https://media.graphassets.com/kGwcSlyYQTzAsKEXGBL4)
### Label
```swift
Label("Secondary", systemImage: "2.square.fill")
	.foregroundStyle(.secondary)
```
### Shape
```swift
RoundedRectangle(cornerRadius: 15)
	.frame(width: 100, height: 30)
	.foregroundStyle(.secondary)
```
### Image
```swift
Image(systemName: "2.square.fill")
	.foregroundStyle(.secondary)
```
### Button
```swift
Button("Tap here!") {
	// Perform action
}
.foregroundStyle(.secondary)
```

Discover how to apply hierarchical styling to text, buttons, shapes, images and labels. Improve your UI and UX with this styling.

How to Correctly use .secondary Hierarchy in SwiftUI

In the Apple ecosystem, the safe area is the designated region within a view that is not covered by elements such as navigation bars, tab bars, toolbars, or other views.
SwiftUI views respect safe areas automatically, but sometimes you might need to place content inside this safe area too. 
In this situations the `safeAreaInset` modifier will come in handy. 
## The safeAreaInset view modifier
The *`safeAreaInset`* view modifier allows you to expand the safe area by placing custom content inside the original safe area of the view.
Its declaration has **4 parameters**:
- `edge`: defines the edge to inset by the size of `content`, to make space for the `content`
- `spacing`: it’s the extra distance placed between the two views
- `alignment`: the alignment is used to position `content` inside the safe area
- `content`: it’s a view builder function that provides the view to display in the safe area space
 
This modifier is especially useful to inset the content of a `List`, like in this example.
```swift
struct SafeAreaInset: View {
  
  let data = Array(repeating: "This is a row", count: 20)
  
  var body: some View {
    List(data, id: \.self) { string in
      Text(string)
    }
    .safeAreaInset(edge: .bottom) {
      Button("This is a button") {
        // Some action...
      }
      .buttonStyle(FullSpanStyle())
      .padding([.top, .horizontal])
      .background(.regularMaterial)
    }
  }
}
```
Here, `safeAreaInset` makes it really easy to place a `Button` at the bottom of the `List` and to adjust the `List` content insets, making sure that no content is covered by the `Button`.
![Screenshot 2023-11-17 at 15.17.58.png](https://media.graphassets.com/xrATgQQ6CBLyMOfByzxQ)
## Conclusion
This is just one way that SwiftUI provides to manage the safe area and it is a really easy and clean one.

Discover how to inset a List content using a dedicated ViewModifier in SwiftUI. How to add a button at the bottom of a List.

Add Custom View to SafeArea in SwiftUI

Menus are really useful in **iOS** and **iPadOS**, they allow to pack many option in a single button in an easy way.
Now, they are even more powerful.
There is a new way to display options in `Menu`.
It is called `Palette` and allows you to display multiple items in a row, that can even be scrollable in case the number of items don't fit in the menu.
This option is available in both `UIKit` and `SwiftUI` but with a slightly different approach.
## Palette picker SwiftUI
In **SwiftUI**, the palette options must be applied to a `Picker` view and the picker must be added inside a `Menu`.
This way the picker will be shown in a row of the menu.
```swift
Menu("Options") {
  Button("Remove tag") { }
  
  Picker("Tags", selection: $selection) {
    ForEach(Tag.allCases, id: \.self) { tag in
      Image(systemName: "circle.fill")
        .tint(tag.color)
        .tag(tag)
    }
  }
  .pickerStyle(.palette)
}
```
This will result in the following menu.
![Menu with palette picker in SwiftUI](https://media.graphassets.com/anraTEiTmekszMMpCeE9)
!NOTE If you apply the `.segmented` picker style to a `Picker` that is placed outside of a `Menu`, it will behaved like the `.segmented` style.
## UIMenu palette UIKit
In **UIKit**, to create a palette menu, add to the `options` parameter of the `UIMenu`, the `.displayAsPalette` and `.displayInline` options.
```swift
let tagOptions = Tag.allCases.map { tag in
  let image = UIImage(systemName: "circle.fill")?.withTintColor(tag.color, renderingMode: .alwaysOriginal)
  return UIAction(image: image) { _ in }
}
 
let tagMenu = UIMenu(options: [.displayInline, .displayAsPalette], 
                     children: tagOptions)
 
let menu = UIMenu(children: [
  UIAction(title: "Remove tag") { _ in },
  tagMenu
]) 
```
The result is the same as for the **SwiftUI** approach.
## Palette selection effect
SwiftUI offers also the possibility to customise the selection effect really easily.
You just need to use the `.paletteSelectionEffect` modifier on your picker and choose one of these options.
* `automatic`, shows a blue outline around selected items
* `custom`, lets you implement your own selection effect
* `symbolVariant`, applies a variant of the SF Symbol used
### Custom selection effect
This selection effect lets you choose which element to display for the selected item.
```swift
Picker("Tags", selection: $selection) {
  ForEach(Tag.allCases, id: \.self) { tag in
    // 1.
    Image(systemName: selection == tag ? "circle.slash.fill" : "circle.fill")
      .tint(tag.color)
      .tag(tag)
  }
}
.pickerStyle(.palette)
// 2.
.paletteSelectionEffect(.custom)
```
1. Change the image whether the current tag is selected
2. Set the selection effect modifier to `custom`
![Custom selection effect on palette menu SwiftUI](https://media.graphassets.com/hnM589QThukiLyxiW4Yj)
### Symbol variant selection effect
The variant selection effect can only be used with **SF Symbols**.
It applies a variant of the base symbol. 
E.g. if you set the property of `.symbolVariant ` to `.slash`, the `circle` symbol will be replaced by the `circle.slash` symbol when it is selected.
```swift
Picker("Tags", selection: $selection) {
  ForEach(Tag.allCases, id: \.self) { tag in
    Image(systemName: "circle")
      .tint(tag.color)
      .tag(tag)
  }
}
.pickerStyle(.palette)
// 1.
.paletteSelectionEffect(.symbolVariant(.slash))
```
1. Set the selection effect modifier to `symbolVariant(.slash)`. This way, the selected tag image will be replaced with the slashed version if available.
![Symbol variant selection effect on palette menu SwiftUI](https://media.graphassets.com/NM9Qz7IpQgOkP5wjg942)
!WARNING Not every SF Symbol has a corresponding variant.
#### Complete code on GitHub
Check out the complete code [here](https://gist.github.com/francescoleoni98/9ec227a73ccccfa6a3ad85d2c0fdcf66).

Use the new palette picker and menu style to display options as rows of compact elements in UIMenu and Menu View in iOS 17.

Create Menus with Palette Picker in SwiftUI and UIKit

With iOS 17 Apple introduced in SwiftUI a new `View` to handle empty states or even errors.
It's called `ContentUnavailableView`, of course it's design it's very "Apple" but it has some degree of customisation.
## Usage
`ContentUnavailableView` provides a ready-to-use configuration and `init`s to let you customise it.
### Empty search state
This is a common scenarios for many apps and having a SwiftUI built-in `View` that can handle this case in nice.
`ContentUnavailableView` provides the `search` and `search(text:)` inits.
The first one will display a default message "No Results" while the second one "No Results for “User text“".
```swift
struct PostsListView: View {
 
  var posts: [Post]
  @State var searchResults: [Post] = []
  @State var searchText: String = ""
 
  var body: some View {
    NavigationStack {
      List(searchResults) { post in
        PostView(post: post)
      }
      .searchable(text: $searchText)
      .navigationTitle("Posts")
      .overlay {
        /// If the `searchText` is not empty and there are no `searchResults`, show the `ContentUnavailableView`.
        if !searchText.isEmpty, searchResults.isEmpty {
          ContentUnavailableView.search(text: searchText)
        }
      }
    }
  }
}
```
Here the relevant code is:
```swift
ContentUnavailableView.search(text: searchText)
```
The result will look as follows:
![Search empty state](/contentUnavailableView/search.png)
Unfortunately you can't change the description text. To do so you can create a custom `ContentUnavailableView`.
### Generic empty state
Now, if you need a greater level of customisation, there are many `init`s that will let you do so.
Here is an example:
```swift
struct PostsListViewm: View {
 
  var posts: [Post]
 
  var body: some View {
    NavigationStack {
      List(posts) { post in
        PostView(post: post)
      }
      .navigationTitle("Posts")
      .overlay {
        if posts.isEmpty {
          ContentUnavailableView("No posts", systemImage: "doc.append", description: Text("Write your first post!"))
        }
      }
    }
  }
}
```
Here the relevant code is:
```swift
ContentUnavailableView("No posts", systemImage: "doc.append", description: Text("Write your first post!"))
```
The result will look as follows:
![Generic empty state](/contentUnavailableView/generic.png)
## Actions
With `ContentUnavailableView` you can suggest user what to do next.
```swift
ContentUnavailableView {
   VStack {
      Image(systemName: "doc.append")
        .font(.system(size: 50))
        .foregroundStyle(Color.secondary)
 
      Text("No posts")
   }
} description: {
   Text("Write your first post!")
} actions: {
   Text("Tap the “+“ button and start writing")
}
```
And the result will be:
![Generic empty state with actions](/contentUnavailableView/actions.png)
## Resources
[Here](https://developer.apple.com/documentation/swiftui/contentunavailableview) is the Apple documentation about `ContentUnavailableView`.
## Conclusion 
`ContentUnavailableView` is a really nice addition to SwiftUI that can be used in many cases.
It allows you to customise it pretty well and provides a default implementation to handle empty search results.

Handle empty states with the new SwiftUI ContentUnavailableView. Available for iOS 17, macOS 14, tvOS 17 and watchOS 10.

ContentUnavailableView Handle Empty States in SwiftUI

SwiftData is a framework for data modelling and management.
It's built on top of CoreData's  persistence layer, but with an API completely redesigned and reimagined for Swift.
SwiftData provides also support for undo and redo automatically. 
And if your app have shared container enabled, SwiftData automatically makes data directly accessible by widgets using the same APIs.
Now, let's see how it works.
## Models
First we need to create the models that we want to persist.
To create a model you need to mark the `class` with the Macro `@Model`.
SwiftData includes all non-computed properties of a class as long as they use compatible types. So far, SwiftData supports types such as `Bool`, `Int` and `String`, as well as `structures`, `enumerations`, and other value types that conform to the `Codable` protocol.
So, let's create the `Folder` and  `Note` models.

```swift
@Model
final class Folder {
 
  @Attribute(.unique)
  var id: String = UUID().uuidString
  var name: String
  var creationDate: Date
  var notes: [Note] = []
 
  init(name: String) {
	self.name = name
	self.creationDate = .now
  }
}
 
@Model
final class Note: Decodable {
 
  @Attribute(.unique)
  var id: String = UUID().uuidString
  var text: String
 
  init(text: String) {
	self.text = name
  }
```
1. Create a model class that contains all the properties you wish to persist
2. Mark the classes with the Macro `@Model`
3. Optionally, add Macros (`@Attribute`, `@Relationship`, `@Transient`) to the property that need them

Creating models is as simple as that.

!WARNING As for now, if you declare an array of objects is likely you will get an error like `Ambiguous use of 'getValue(for:)'`. This is a bug in Xcode 15.0 beta that I think will be fixed on final version of Xcode. For now, just remove the `@Model` from the `Note` class and add `@Transient()` to `notes` property.
## Model attributes
Properties in the `@Model` can have [Macros](/articles/swift-macros) attached to them that will defined their behaviour.
Currently there are 3 types of macros: [`@Attribute`](https://developer.apple.com/documentation/swiftdata/attribute%28_:renamingidentifier:hashmodifier:%29), [`@Relationship`](https://developer.apple.com/documentation/swiftdata/relationship%28_:_:renamingidentifier:inverse:hashmodifier:%29), [`@Transient`](https://developer.apple.com/documentation/swiftdata/transient).
### @Attribute
This Macro alters how SwiftData handles the persistence of a particular model property.
This is commonly used to mark a property as primary key, as we did for `Folder.id`.
```swift
@Attribute(.unique) 
var id: String
```
But there are many other options:
* `encrypt`:  Stores the property’s value in an encrypted form.
* `externalStorage`: Stores the property’s value as binary data adjacent to the model storage.
* `preserveValueOnDeletion`: Preserves the property’s value in the persistent history when the context deletes the model.
* `spotlight`: Indexes the property’s value so it can appear in Spotlight search results.
* `transformable`: Transforms the property’s value between an in-memory form and a persisted form.
* `transient`: Enables to the context to disregard the property when saving the model.
* `unique`: Ensures the property’s value is unique across all models of the same type.
### @Relationship
By default if you declare a property whose type is also a model, SwiftData manages the relationship between these models automatically.
But if you want to customise its behaviour, you can use the `@Relationship` Macro.
```swift
@Relationship(.cascade) 
var notes: [Note] = []
```
This way if the `Folder` is deleted, all of its notes are deleted too.
This Macro defines the behaviour that in CoreData was named **Delete Rule**.
!NOTE Both `@Attribute` and `@Relationship` support the renaming of the  argument in case you want to preserve the original name of the property.
### @Transient
By default SwiftData persist all non-computed properties inside the model, but if you don't need to persist a specific property, you can add the `@Transient` Macro to that property.
```swift
@Transient 
var someTempProperty: String
```
## The model container
Before using these models, we need to tell SwiftData which models to persist.
To do this there is the `.modelContainer` modifier. To use it you simply pass all the models you want to persist.
```swift
@main
struct NoteBookApp: App {
 
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(for: [Folder.self]) // <-
    }
}
```
Here we pass only the `Folder` class because SwiftData knows that it has to persist also `Note` since there is a relationship between the two classes.
The `.modelContainer` modifer allows you to specify some options.
* `inMemory`: Whether the container should store data only in memory.
* `isAutosaveEnabled`: If enabled you don't need to save changes.
* `isUndoEnabled`: Allows you to undo or redo changes to the context.
* `onSetup`: A callback that will be invoked when the creation of the container has succeeded or failed.
!NOTE If you model contains a relationship to another model, you can omit the destination model.
## Saving models
Now, we are ready to use SwiftData.
Let's see how to save models.
First we need to get the context, to do this we use the `@Environment(\.modelContext)` wrapper.
```swift
@Environment(\.modelContext) private var context
```
Next, once we have the context, we create the object we want to save and we insert it into the context.
```swift
let folder = Folder(name: "Trips")
context.insert(folder)
```
If we have enabled the autosaving while creating the container we don't have to do anything else.
Otherwise we need to save the context.
```swift
do {
   if context.hasChanges {
      context.save()
   }
} catch {
   print(error)
}
```
## Fetching models
To fetch existing models, SwiftData provides the `@Query` wrapper.
This wrapper allows you to sort, filter and order the result of the query.
```swift
@Query(filter: #Predicate { $0.name != "" },
       sort: \.name,
       order: .forward) 
var folders: [Folder]
```
Here we query by:
* Filter folders that have non-empty name
* Sort them by the `name` property
* Order them ascending
 
Or, we can use a `FetchDescriptor`.
```swift
extension FetchDescriptor {

  static var byName: FetchDescriptor<Folder> {
    var descriptor = FetchDescriptor<Folder>(
	    predicate: #Predicate { $0.id != "" },
		sortBy: [SortDescriptor(\.name)]
	)
    descriptor.fetchLimit = 50
    descriptor.includePendingChanges = true
    return descriptor
  }
}
 
@Query(.byName) 
var items: [Folder]
```
This way we can reuse the `FetchDescriptor` for as many queries as we need.
## Updating models
To update a model we just need to change the value of the property we want and if autosave is enabled that's all.
```swift
folder.name = "New name"
```
Otherwise we need to save the context.
## Deleting models
To delete a model is just as simple as to create one.
We get the instance of the object to delete and we pass it to the context.
```swift
context.delete(model)
```
## Conclusion
SwiftData really simplifies the usage of CoreData, making it less prone to errors.
Of course this is still in Beta so there will be changes and improvements, but so far I really enjoyed playing with it.
Hope this will help developers speed up their workflow to persist data and reduce crashes.

Discover the SwiftData framework built on top of CoreData. Save and fetch data locally. Available for Xcode 15, Swift and SwiftUI.

SwiftData the Successor of CoreData Explained with SwiftUI

Finally with **Xcode 15** and **iOS 17** you can make your SwiftUI Charts scrollable.
Apple introduced some new APIs that make this process easy and customisable.
## APIs
### Scroll direction
```swift
func chartScrollableAxes(_ axes: Axis.Set)
```
Here you can choose whether to scroll your chart `vertically` or `horizontally`.
### Visible domain
```swift
func chartXVisibleDomain(length: P)
func chartYVisibleDomain(length: P) 
```
Use this method to control how much of the chart is visible.
For example, in the bar chart, the length is the number of bars you want to be visible, the exceeding bars will be hidden and the user will have to scroll to see them.
### Scroll position
```swift
func chartScrollPosition(x: Binding<some Plottable>)
func chartScrollPosition(y: Binding<some Plottable>)
```
This methods gives you the current scroll position.
To use it, declare a `@State` variable and pass it to the method.
```swift
@State var xScrollPosition: Double = 0
 
Chart {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollPosition(x: $xScrollPosition)
```
### Initial scroll position
```swift
func chartScrollPosition(initialX: some Plottable)
func chartScrollPosition(initialY: some Plottable)
```
Use this method to provide the initial position of the chart.
This example will set the initial scroll position to the 4th bar.
```swift
let data = [Entry(x: 0, y: 43),
            Entry(x: 1, y: 53),
            Entry(x: 2, y: 25),
            Entry(x: 3, y: 43),
            Entry(x: 4, y: 73),
            Entry(x: 5, y: 24),
            Entry(x: 6, y: 82),
            Entry(x: 7, y: 37),
            Entry(x: 8, y: 66),
            Entry(x: 9, y: 33)]
 
Chart(entry) {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollPosition(initialX: 4)
```
Here, in the `chartScrollPosition(initialX:)` method we pass the `x` value we want the chart to start from.
### Scroll behavior
```swift
func chartScrollTargetBehavior(_ behavior: some ChartScrollTargetBehavior)
```
This method controls to which bar the chart will snap once the user stops scrolling.
An basic implementation of this method is this:
```swift
Chart {
    // ...
}
.chartScrollableAxes(.horizontal)
.chartScrollTargetBehavior(.valueAligned(unit: 2))
```
Here the chart will snap every 2 bars.
## Conclusion 
This is a great addition to the great SwiftUI Charts library, since there are many scenarios where charts can have a lot of data.
But unfortunately these features are available only in iOS 17 for now.
I hope Apple will in future back deploy these methods also for iOS 16.

Discover the new SwiftUI Charts APIs that enables you to create scrollable chart easily. Available for Xcode 15 and iOS 17.

Make your Chart Scrollable with SwiftUI Charts (iOS 17)

With iOS 16, SwiftUI has a new dedicated [`PasteButton`](https://developer.apple.com/documentation/swiftui/pastebutton) that lets user paste any kind of objects.
It let us receive any object that conforms to the  `Transferable` protocol. Some examples are: `String`, `URL`, `Data` and `Image`.
## Implementation
To let the user paste an **image**, you can set the `payloadType` to `Data.self` and then convert the `Data` to a `UIImage` and then use this image to create an `Image`.
```swift
PasteButton(payloadType: Data.self) { data in
   guard let imageData = data.first else { return }
   self.image = Image(uiImage: UIImage(data: imageData) ?? UIImage())
}
```
Or, with a more straightforward implementation.
```swift
PasteButton(payloadType: Image.self) { images in
   guard let image = images.first else { return }
   self.image = image
}
```
If you need a more fine grained filter for the objects that the user is allowed to paste, you can use the `init(supportedContentTypes:)`.
In this example we allow the user to paste only `xml` files.
```swift
PasteButton(supportedContentTypes: [.xml]) { providers in
   for provider in providers {
      let progress = provider.loadFileRepresentation(for: .xml) { url, openInPlace, error in
         if let url {
            try? String(contentsOf: url)
         }
      }
   }
}
```
!NOTE The input into the closure is an array of objects or providers not a single one.
## Behaviour
The button dims itself if no object that matches the declared type is present in the user's clipboard.

Discover the handy PasteButton available in iOS 16 and SwiftUI, that will allow users to easily paste content in your app.

How to Let User Paste Data Into your App in SwiftUI

The markdown feature of the `Text` element is a great feature!
You can just type your markdown string and SwiftUI will render the text formatted.
Let's see different ways to use it.
## Usage
You can use a string literal
```swift
Text("This will be **bold**")
```
Or you can pass the text from a variable
```swift
let markdownText = "This will be **bold**"
// […]
Text(.init(markdownText))
```
## Conclusion
Now you can markdown text in your app. Happy coding!
I hope I helped you with you journey with SwiftUI and iOS development.
See you in the next guide!

Discover different ways to use Markdown with the Text element in SwiftUI to easily add markdown text to your app.

How To Use Markdown in SwiftUI

Recently I had to build an app using **SwiftUI** and **CoreData**.
I thought CoreData was used almost as you would use it with UIKit, but apparently there are some differences.
This guide is intended as a summary of my experience using CoreData combined with SwiftUI. If I will find other aspects, I will add them to this guide.
So, without further ado, let's begin.
## Set-up
This is a pretty straightforward part.
* If you start a new project you can check the '**Use Core Data**' option and '**Host in CloudKit**' if you want to save your users data to the cloud. In this case XCode will take care of setting up the project for you. (For the CloudKit part will need to do some extra steps).
* If you have already a project you'll need to create a **Persistence.swift** file and a swift file where you initialise the CoreData stack. (You can even create a new project following the previous step, and copy the **Persistence.swift** file generated by XCode to your project.
![CoreData setup](/coredata/setup.png)
## Setup the @main app
Now that you have your project, to be able to use CoreData within your `View`s, you need to pass the `managedObjectContext` down you view hierarchy.
Usually this is done in your **(AppName)App.swift** file.
```swift
@main
struct ExampleApp: App {
 
  let persistenceController = PersistenceController.shared
 
  var body: some Scene {
    WindowGroup {
      ContentView()
        .environmentObject(persistenceController)
        .environment(\\.managedObjectContext, persistenceController.container.viewContext)
    }
  }
}
```
Personally I pass, as an `.environmentObject`, the **PersistenceController** itself. Because I like to keep all the CRUD logic inside that struct, but that's up to you. If you want to do so you need to make your **PersistenceController** struct conform to
**ObservableObject**.
Great, now you're able to create, read, update and delete `NSManagedObjects` in your `View`s.
!TIP **PersistenceController** ([here is an exemple](/articles/persistence-controller)) is the struct that XCode generates  automatically for you when you start a new project with the '**Use Core Data**' option checked.
## Operating with CoreData
To operate with CoreData in your `View` you need to access the `NSManagedObjectContext`. To do so, you have two options:
* Using the **@Environment** wrapper in your `View`s
```swift
@Environment(\\.managedObjectContext) private var viewContext
```
* Using the **@EnvironmentObject** wrapper to get your controller, and from it you can access the `viewContext` or CRUD methods
```swift
@EnvironmentObject private var persistenceController: PersistenceController
```
## Saving the context
You can save the context using the `.save()` method of `NSManagedObjectContext`. Before saving the context you can check whether  there are some changes, and save it only if they are present.
```swift
do {
  if container.viewContext.hasChanges {
    try container.viewContext.save()
  }
} catch {
  print(error)
}
```
## Saving objects
To save a `NSManagedObject` you first need to instanciate it and than configure its properties. And then save the context.
```swift
let note = Note(context: container.viewContext)
note.id = id
note.text = text
note.folder = folder
note.creationDate = Date()
saveContext()
```
!TIP You can animate this insertion wrapping this code inside the `withAnimation` function of SwiftUI.
## Fetching objects
Now the fetching part, this is where I found the most difficulties. Let's start right away.
To fetch objects in SwiftUI the most convenient way of doing it is using the **@FetchRequest** or **@SectionedFetchRequest**  wrappers, in every single `View` you need to read from CoreData.
!WARNING Passing fetched objects between `View`s will break the automatic updates in case you add, edit or delete objects. (If you know a way to pass fetch objects without breaking the updates let me know and I will update this guide)
So you need to add a **@FetchRequest** in every `View` you need CoreData objects and automatic updates. I know it is a bit annoying but it will be worth it.
So, with that said the code is the following:
```swift
@FetchRequest(entity: Object.entity(),
              sortDescriptors: [NSSortDescriptor],
              predicate: NSPredicate,
              animation: .default)
var objects: FetchedResults<Object>
```
Or, if you want your objects grouped by a property:
```swift
@SectionedFetchRequest(entity: Object.entity(),
                       sectionIdentifier: \\Object.property,
                       sortDescriptors: [NSSortDescriptor],
                       predicate: NSPredicate,
                       animation: .default)
var sections: SectionedFetchResults<YourSectionType, Object>
```
To use these sections you just pass them to a `List` or `ForEach`, and then to another `ForEach`.
```swift
List(sections) { section in
  Section(section.id) {
    ForEach(section) { object in
      // Configure your view with the object
    }
  }
}
```
!TIP If you use **@SectionedFetchRequest** with sorting you may need to specify two sort descriptor. The first will sort the sections and the second one will take care of the objects inside each section. This feature is really useful and requires very little effort.
Using **@FetchRequest** or **@SectionedFetchRequest** wherever you add, update or delete an object, the views are automatically updated.
Now, if you need to use a **@FetchRequest** with a `NSPredicate` that has a parameter passed from the parent `View`, I found that the next option works wonderfully.
```swift
@FetchRequest
var objects: FetchedResults<Object>
 
init(id: ID) {
  _objects = FetchRequest<Object>(predicate: NSPredicate(format: "id == %@", id))
}
```
This way you can pass your parameter in the `init` and use it to filter your results while keeping the automatic updates. The same goes for **@SectionedFetchRequest**.
## Updating objects
To update a `NSManagedObject` you will need to have the `NSManagedObject` to update, fetched as described before and update its properties. And then save the context.
```swift
note.text = newText
note.folder = newFolder
saveContext()
```
## Deleting objects
To delete a `NSManagedObject` you will need to have the `NSManagedObject` to update, fetched as described before and delete it.
```swift
viewContext.delete(object)
```
------
I didn't explained every single CRUD method of CoreData like batch insertion and deletion since this guide is focused on the interaction between CoreData and SwiftUI. Every `NSManagedObjectContext` method, background context, performAndAwait, … behaves exactly like it does with UIKit.
------
## Conclusion
That's all I have discovered so far about **CoreData** used with **SwiftUI**. This guide will be constantly updated.
If you want to suggest a better way of doing something, **leave a comment** and I will update this guide with the best option.
I hope I helped you with you journey with SwiftUI and iOS development.

See how to use CoreData database with SwiftUI. Syncing changes from CoreData to every View of your app.