Design+Code logo

Quick links

No results found

Suggested search

In this section, we will add the scroll view to the home view. By doing that, it allows us to see the content that is hidden below. It also enables the scroll gesture.## Scroll View

The ScrollView is a container that displays views vertically and horizontally. It contains four horizontal ScrollViews.

ScrollView(.vertical, showsIndicators: false) {
  VStack {


Scroll Section

Create a new file for the Scroll View, which has a title and a horizontal scroll view that contains multiple cards.

@State var title: String = "Now Playing"

@State var posters: [String] = ["poster1", "poster2", "poster3", "poster4", "poster5", "poster6"]

var body: some View {
  VStack(alignment: .leading) {
      .padding(.horizontal, 20)

    ScrollView(.horizontal, showsIndicators: false) {
      HStack(spacing: 20.0) {
        ForEach(posters.indices, id: \.self) { index in
            .frame(width: 100, height: 130)
      .offset(x: 20)
      .padding(.trailing, 40)

In HomeView, declare the 3 arrays. Then, use the ScrollSection views 4 times.

@State var posters1: [String] = ["poster1", "poster2", "poster3", "poster4", "poster5", "poster6"]

@State var posters2: [String] = ["poster7", "poster8", "poster9", "poster10", "poster11", "poster12"]

@State var posters3: [String] = ["poster13", "poster14", "poster15", "poster16", "poster17", "poster18"]

VStack(spacing: 20.0) {
  ScrollSection(title: "Now Playing", posters: posters1)

  ScrollSection(title: "Coming Soon", posters: posters2)

  ScrollSection(title: "Top Movies", posters: posters3)

  ScrollSection(title: "Favorite", posters: posters1)
.padding(.bottom, 90)

In ContentView, we can replace the text by the view.


Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.


Design template


Source code for all sections


Video files, ePub and subtitles

Browse all downloads

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Willie Yam

Front-end/UI developer at Design+Code

I do UI coding. HTML/CSS/JS/SWIFTUI dev.


10 courses - 37 hours

course logo

Design and Prototype an App with Play

Build a completely functional prototype without writing a single line of code from your phone

3 hrs

course logo

Create a 3D site with game controls in Spline

Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline

2 hrs

course logo

Build a Movie Booking App in SwiftUI

Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow

1 hrs

course logo

Build Quick Apps with SwiftUI

Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch

11 hrs

course logo

CSS Handbook

A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments

1 hrs

course logo

Advanced React Hooks

Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud

5 hrs

course logo

Unity for Designers

If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.

5 hrs

course logo

Create a Javascript Game

Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.

2 hrs

course logo

Build an ARKit 2 App

Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them

4 hrs

course logo

Create a SpriteKit Game

Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform

3 hrs