Flashzilla

Paul Hudson's (@twostraws) 100 Days of Swift UI Project 17

Source URL: link

In this project we’re going to build an app that helps users learn things using flashcards – cards with one thing written on such as “to buy”, and another thing written on the other side, such as “comprar”. Of course, this is a digital app so we don’t need to worry about “the other side”, and can instead just make the detail for the flash card appear when it’s tapped.

Note: In this project, I chose to go with less branches and a shorter Read Me, focusing only on what I've found interesting or important for my own projects. One can always refer to Paul's original tutorial (always recommended) for a complete explanation.

Gestures in SwiftUI

Examples of gestures (note: it doesn't work well in the simulator):

import SwiftUI
structContentView:View{@StatevartapMessage="Tap to start!"@StatevargestureChangedMessage="This triggers whenever the gesture changes!"@StatevarscaleMessage="Scale gesture!"@StatevarcurrentAmount=0.0@StatevarfinalAmount=1.0@StatevarrotationMessage="Rotation gesture!"@StatevarcurrentAngleAmount=Angle.zero
@StatevarfinalAngleAmount=Angle.zero
varbody:someView{Spacer()Text(tapMessage).onTapGesture(count:2){
tapMessage ="You tapped 2 times"}.onLongPressGesture(minimumDuration:2){
tapMessage ="You pressed long for 2 seconds"}Spacer()Text(gestureChangedMessage).onLongPressGesture(minimumDuration:1){
gestureChangedMessage ="Long press gesture started!"} onPressingChanged:{ inProgress in
gestureChangedMessage =("In progress: \(inProgress ?"Long pressing":"Long pressing ended")")}Spacer()Text(scaleMessage).scaleEffect(finalAmount + currentAmount).gesture(MagnifyGesture().onChanged{ value inself.currentAmount = value.magnification -1}.onEnded{ value in
finalAmount += currentAmount
currentAmount =0})Spacer()Text(rotationMessage).rotationEffect(currentAngleAmount + finalAngleAmount).gesture(RotateGesture().onChanged{ value inself.currentAngleAmount = value.rotation
}.onEnded{ value in
finalAngleAmount += currentAngleAmount
currentAngleAmount =.zero
})Spacer()}}
#Preview {ContentView()}

Single CardView

Source URL: link

Result:

Building a stack of cards

Source URL: link

I've found this extension for stacking cards really interesting:

extensionView{func stacked(at position:Int, in total:Int)->someView{letoffset=Double(total - position)returnself.offset(y: offset *10)}}

And here's the code...

ZStack{Image(.background).resizable().ignoresSafeArea()VStack{ZStack{ForEach(0..<cards.count, id: \.self){ index inCardView(card:cards[index]).stacked(at: index, in: cards.count)}}}}

... that creates the end result below:

Challenge 1

Source URL: Flashzilla Wrap Up

Branch: challenge-01

When adding a card, the text fields keep their current text. Fix that so that the textfields clear themselves after a card is added.

This problem was solved by simply setting the two state variables back to an empty string value after adding (and saving) the card as below:

func addCard(){lettrimmedPrompt= newPrompt.trimmingCharacters(in:.whitespaces)lettrimmedAnswer= newAnswer.trimmingCharacters(in:.whitespaces)guard trimmedPrompt.isEmpty ==false && trimmedAnswer.isEmpty ==falseelse{return}letcard=Card(prompt: trimmedPrompt, answer: trimmedAnswer)
cards.insert(card, at:0)saveData()
// Challenge 1 solution below
newPrompt =""
newAnswer =""}

Acknowledgments

Original code created by: Paul Hudson - @twostraws (Thank you!)

Made with ❤️ by @cewitte