Display pop-up Sheets and FullScreenCovers in SwiftUI | Bootcamp #28
Вставка
- Опубліковано 30 вер 2024
- We will learn how to segue in SwiftUI using the .sheet() and .fullScreenCover() modifiers. As you will see, both methods have a really professional look (UI) and will pop a new View on top of our current view. We will review how to implement sheets the correct way and cover some common mistakes that developers make while using sheets, such as including conditional logic within the closure or adding multiple .sheet modifiers to the same hierarchy.
*NOTES*
- There ARE ways to include conditional logic into the .sheet() closure directly but it is more advanced than what we are learning in this video. For beginner purposes, I recommend to avoid adding any logic into the closure.
- I will be doing another video on how to present multiple sheets from a single View soon. There are several techniques, but they are more advanced and deserve their own video.
Next video: • Using Sheets, Transiti...
Last video: • How to use Transition ...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...
FYI: @Enviroment(\.presentationMode) will be deprecated, use this instead: @Enviroment(\.dismiss) var dismissScreen and you will call it in the action of your button as a function, like this: dismissScreen().
Thank you! I love that I can ALWAYS come into the comments when I get a "deprecated" warning, and someone awesome like you has explained the new methods!
Also, he never (previously) explained the environment wrapper.
It looks like the presentation mode has been deprecated since iOS 15. To go about dismissing do:
@Environment(\.dismiss) var dismiss
And then call dismiss:
dismiss()
Thank you for this information.
thanks
@Environment should have a separate video
@Enviroment(\.presentationMode) var presentationMode is confusing
Hi Zheng, great idea. I will try to discuss the @Environment soon!
28 videos in, and you finally called a backslash a backslash! 🥳 Really enjoying the videos so far, Nick!
Haha sorry Bob! I didn't even realize until someone had commented that I was saying it wrong 😔 I'm still getting used to coding while talking out loud. Thanks for watching though!
PresentationMode is Deprecated, we can use @Environment(\.dismiss) var dismiss or @Environment(\.isPresented) var isPresented
Update - You can now call multiple sheet modifiers or use conditionals within one
So well done! You are the best! Will provide you some coffee! Bob
Thank you Bob!
What is the best practice use when I want to present fullscreencover on 50% of the first screen?
Hi, which is the video for the advanced fullscreen conditionals?, thanks!
Hi, thanks for this great videos, I'm watching one by one since Bootcamp # 1
For this one I've made exactly like what you did here and it's working fine, but out of curiosity I've tried another way and it worked just fine as well, it's by using Binding property wrapper as you explained in the video # 22, and it's doing the same thing without the need to use @Environment.
But I'm not sure if this could be done in real Apps. Or would it make a conflict with something else.
Either works… Binding requires you to pass the Binding directly… whereas the Environment can be pulled from any child view (it can be easier to access in a deeper View hierarchy)
Update: from the developer documentation, right now you need only to toggle the isPresented, then sheet dismissed, magically .
to dismiss the sheet in SwiftUI 15, is it ok to just toggle the isPresented variable in the sheet content?
for someone confuse now the presentationMode change to. @Environment(\.dismiss) var dismiss.
I noticed at 9:00 when the sheet pops up, the view underneath it also slides down revealing a white sliver above both views. Do you know how to get rid of this? or at least change the color of it?
Does Nick ever explain ignoreSafeArea?
Here ua-cam.com/video/_0NDKxvfg40/v-deo.htmlsi=T_aaSQlhHeNKpr2N and here ua-cam.com/video/pN5ZMV_3npE/v-deo.htmlsi=MHKNvbnaz7l-y_-y
@@SwiftfulThinking Thank you!
Is using @Binding instead @Environment to close sheet wrong?
Loving it! Thanks man!
You are cruising through the playlist! 🚀
@@SwiftfulThinking Still can't believe it's FREE!
@SwiftfulThinking
Is this still accurate at 10:35?
I conducted tests on conditional logic in Sheets, and it appears to be functioning correctly.
I also examined your statement that "the sheet generates the content when the view loads," but it didn't happen instantly for me. Instead, it initialized only when I opened the sheet. It seems like Sheets might exhibit lazy behavior in this regard.
I would appreciate your feedback, as this has left me somewhat perplexed.
It may have been updated to be Lazy in recent versions of SwiftUI. I will have to check, but I wouldn’t be surprised. We have seen similar updates for other modifiers too. Generally, lazy is better 👍
this was amazing, i have so many ideas, no longer limited to one screen apps
Nick, do you know how would we call or create that sort of popup window that comes for few secs and disappears afterwards ? For eg. when you Love a song in Apple Music, you will see that popup with ultraThinMaterial background that comes up for few secs and goes away afterwards.
You could just do a simple ZStack and toggle a local Boolean value. Set it to true and add a delay for setting it back to false!
showSheet is @State propery wrapper, but you are using it as bindable while presenting the sheet with $showSheet. How is this possible without defining it as @Binding.?
This is the magic of SwiftUI 👍
Nick how's it going, please someone can share with the code of the class because I am having an error that says Invalid redeclaration of 'SecondScreen' time 05:41
//
// Display pop-up Sheets and FullScreenCovers.swift
// SwiftUI Part 2
//
// Created by mac on 9/18/24.
//
import SwiftUI
struct Display_pop_up_Sheets_and_FullScreenCovers: View {
@State var showSheet: Bool = false
var body: some View {
ZStack{
Color.orange.opacity(0.4)
.edgesIgnoringSafeArea(.all)
Button(action: {
showSheet.toggle()
}, label: {
Text("Button")
.foregroundColor(.black)
.font(.headline)
.padding(20)
.background(Color.white.cornerRadius(20))
})
.sheet(isPresented: $showSheet, content: {
SecondScreen()
})
}
}
struct SecondScreen: View{
@Environment(\.dismiss) var dismiss
var body: some View{
ZStack(alignment: .topLeading){
Color.red.opacity(0.4)
.edgesIgnoringSafeArea(.all)
Button(action: {
dismiss()
}, label: {
Image(systemName: "xmark")
.foregroundColor(.red)
.font(.largeTitle)
.padding(20)
.background(Color.red.opacity(0.2).cornerRadius(20))
})
}
}
}
struct Display_pop_up_Sheets_and_FullScreenCovers_Previews: PreviewProvider {
static var previews: some View {
Display_pop_up_Sheets_and_FullScreenCovers()
SecondScreen()
}
}
}
I see you have saved all boot camps in 1 swift file. Is there a way i can download all 50 bootcamps in that file?
Hey Bob! Yes, the source code is available on my Github: github.com/SwiftfulThinking
You sold me. subscription
Nice bro...🤗
Thank you Nick! It is extremely fascinating to learn Swift UI with you❤
Hey nick thanks for your video I had figured it out my issue hopefully
12:38 reference
How to change transition in fullScreenCover. I want the transition from leading
What’s the difference here between using a full screen cover vs a navigation stack and link to a new page?
When you dismiss the sheet, what about the value of "showSheet" in the parent view ? Does it become false or stay being true ?
Using Text("\(showSheet.description)") I can confirm that when the sheet is dismissed the value returns to "false"
Hello, when you apply sheet, i can notice the background instead of green there is white color on border, can you specify this white color and turn into another color?
Great video... again! The 'bulb' is starting to glow, not as dim!
Hi, how if i use binding in secondScreen? pass the showSheet boolean into secondScreen and set back to false?
You are the best, could you tell me how to add transition on .fullScreenCover?
hello , I want to implement a transition to the second screen, which is located in another file. how to do it? .sheet
i just loved the way u make things easy to under stand amazing!😊
Thee main takeaways 12:22 the comment for myself.
Thank you for your helpful tutorial 🤎🤎
Would use of Enums be a good option to show different sheets?
This is sooo excited!!! hahah I just jumped from my bed when you crate the second screen and it worked hahaha
Haha nice! 🚀🦊
Hey Nick - how did you select the entire block of code at 4:40? Is there a hotkey for it? Thanks!
Cursor was already at the bottom of the block he used Shift + click tu select :)
NIce job, It is very helpful, thanks man
Thank you for watching man!
Hi! does sheet and full-screen cover supports dark theme?
Yes they should haha
Hello, I added switch statement inside sheet, and it works perfectly
I would be careful haha
Excellent video
It seems that I can build an entire app based on this series lol
You wouldn’t be the first 😂🥳🔥
Great video
Thanks a lot!
brilliant
thank you for everything Nick, you solved a lot of questions that I had (forza Italia)
Haha forza!!! 😂 Glad you're enjoying the vids!
Thank you!!!
You're welcome 최승기 !
Nice!
:)