How to change text size using picker in swiftui - iphone

Question

I am a beginner level in swiftui. I begin a bible app as a starter's project. I create a Setting and from that setting, I want to change my font size by using a picker. It's been 4 days that I am searching online for a solution, and I couldn't figure out what should I do.
Question 1: I don't know how to update the font size based on the picker selection. Some say to use .onChange, but I don't know how to do it. So, I tried using a switch case method, but still don't know how to update the text. Also, I tried using custom modifiers to replace .font(.footnote) something like that. But still, I don't know how to update it and EnvironmentalObject doesn't helpful at all. Please guide me on how to solve the issue.
Question 2: Every time I play the canvas, the picker selection always starts from the default index which makes sense. But in the actual app, does it always starts with the default index after the user selected a different index or what should I do in order to keep the preselected index.
Here is my code:
import SwiftUI
struct Setting: View {
#State private var fontSizeIndex = 3
#State private var fontIndex = 1
var body: some View {
NavigationView {
ScrollView {
// Text Settings
Form {
// Font Size Picker
Section(header: Text("Text Settings")) {
Picker(selection: $fontSizeIndex, label: Text("Font Size"),
content: {
Text("Extra Small").tag(1)
Text("Small").tag(2)
Text("Medium").tag(3)
Text("Large").tag(4)
Text("Extra Large").tag(5)
})
// Font Picker
// I plan to make custom fonts if I know how to update my
// selection
Picker(selection: $fontIndex, label: Text("Font"), content: {
Text("Font1").tag(1)
Text("Font2").tag(2)
Text("Font3").tag(3)
Text("Font4").tag(4)
Text("Font5").tag(5)
Text("Font6").tag(6)
Text("Font7").tag(7)
})
}
}
.frame(height:280)
}
}
}
This is my Text or Scripture() which is in another view
import SwiftUI
struct Scripture: View {
//#EnvironmentObject var fsc: FontSizeChanging
var body: some View {
ScrollView {
Text("Hih in Zeisu Khazih khang ciamtehna ahi hi. Amah in David tapa hi a, David in Abraham tapa ahi hi. 2 Abraham tapa Isaac, Isaac tapa Jacob, Jacob tapa Judah le a sanggam pasal teng ahi hi. 3 Judah in a zi Tamar tawh a neih a tapa Perez le Zerah, Perez tapa Hezron, Hezron tapa Ram, 4 Ram tapa Amminadab, Amminadab tapa Nahshon, Nahshon tapa Salmon, 5 Salmon in a zi Rahab tawh a neih a tapa Boaz, Boaz in a zi Ruth tawh a neih a tapa Obed, Obed tapa Jesse, 6 Jesse tapa kumpipa David ahi hi. David in Uriah zi tawh a neih a tapa Solomon, 7 Solomon tapa Rehoboam, Rehoboam tapa Abijah, Abijah tapa Asa, 8 Asa tapa Jehoshaphat, Jehoshaphat tapa Joram, Joram tapa Uzziah, 9 Uzziah tapa Jotham, Jotham tapa Ahaz, Ahaz tapa Hezekiah, 10 Hezekiah tapa Manasseh, Manasseh tapa Amon, Amon tapa Josiah ahi hi. 11 Jeconiah le a sanggam pasal tengin Babylon gamah sala a kipaipih madeuh in a suak Josiah tate ahi uh hi. 12 Babylon gama saltan khit ciangin Jeconiah in a neih a tapa Shealtiel, Shealtiel tapa Zerubbabel, 13 Zerubbabel tapa Abiud, Abiud tapa Eliakim, Eliakim tapa Azor, 14 Azor tapa Zadok, Zadok tapa Achim, Achim tapa Eliud, 15 Eliud tapa Eleazar, Eleazar tapa Matthan, Matthan tapa Jacob, 16 Jacob tapa Joseph hi a, Joseph in Khazih a kici Zeisu a hong suahna Mary pasal ahi hi. 17 Tua hi a, Abraham khang panin David khang ciang a vekin khang sawm le khang li, David khang panin Babylon gama saltang dinga a kimat hun ciang khang sawm le khang li, Babylon gama saltan hun pan Khazih khang ciang khang sawm le khang li mah ahi hi. 18 Zeisu Khazih a suahzia hih bang ahi hi. A nu Mary pen Joseph zi dingin zuthawl kipiasa hi a, a kiteenma un Kha Siangtho hangin gai hi ci in kithei hi. 19 A lawmpa Joseph in mi lungsim hoih hi a, a lawmnu Mary min daisak nuamlo ahih manin maksim dingin a ngaihsun hi.")
//.font(fsc.fontSize)
.foregroundColor(.primary)
//.font(Setting(fontSizeIndex: self.$fontSizeIndex))
.multilineTextAlignment(.leading) // test .center here
.lineSpacing(5)
.padding()
}
}
}
struct Scripture_Previews: PreviewProvider {
static var previews: some View {
Scripture()
}
}

Answer 1

The following should work.
I added a gear icon on the top right of the screen to make navigation between the Settings and Scripture easier. This will allow you to change the font size with ease.
My approach uses #AppStorage. This saves the data, so when the user launches the app, their font size choice will remain. You can use this anywhere you have to edit the font size.
To change the font sizes, just update the values within the .tag() inside your picker. I picked a random set of numbers. This is where you want to enter the desired font sizes.
import SwiftUI
struct Setting: View {
#State private var fontSizeIndex = 3
#State private var fontIndex = 1
#AppStorage("fontSize") var fontSize = 50
var body: some View {
NavigationView {
ScrollView {
// Text Settings
Form {
// Font Size Picker
Section(header: Text("Text Settings")) {
Picker(selection: $fontSize, label: Text("Font Size"),
content: {
Text("Extra Small").tag(10)
Text("Small").tag(15)
Text("Medium").tag(20)
Text("Large").tag(25)
Text("Extra Large").tag(50)
})
// Font Picker
// I plan to make custom fonts if I know how to update my
// selection
Picker(selection: $fontIndex, label: Text("Font"), content: {
Text("Font1").tag(1)
Text("Font2").tag(2)
Text("Font3").tag(3)
Text("Font4").tag(4)
Text("Font5").tag(5)
Text("Font6").tag(6)
Text("Font7").tag(7)
})
}
}
.frame(height:280)
}
}
}
}
struct Scripture: View {
//#EnvironmentObject var fsc: FontSizeChanging
#AppStorage("fontSize") var fontSize = 50
var body: some View {
NavigationView {
ScrollView {
Text("Hih in Zeisu Khazih khang ciamtehna ahi hi. Amah in David tapa hi a, David in Abraham tapa ahi hi. 2 Abraham tapa Isaac, Isaac tapa Jacob, Jacob tapa Judah le a sanggam pasal teng ahi hi. 3 Judah in a zi Tamar tawh a neih a tapa Perez le Zerah, Perez tapa Hezron, Hezron tapa Ram, 4 Ram tapa Amminadab, Amminadab tapa Nahshon, Nahshon tapa Salmon, 5 Salmon in a zi Rahab tawh a neih a tapa Boaz, Boaz in a zi Ruth tawh a neih a tapa Obed, Obed tapa Jesse, 6 Jesse tapa kumpipa David ahi hi. David in Uriah zi tawh a neih a tapa Solomon, 7 Solomon tapa Rehoboam, Rehoboam tapa Abijah, Abijah tapa Asa, 8 Asa tapa Jehoshaphat, Jehoshaphat tapa Joram, Joram tapa Uzziah, 9 Uzziah tapa Jotham, Jotham tapa Ahaz, Ahaz tapa Hezekiah, 10 Hezekiah tapa Manasseh, Manasseh tapa Amon, Amon tapa Josiah ahi hi. 11 Jeconiah le a sanggam pasal tengin Babylon gamah sala a kipaipih madeuh in a suak Josiah tate ahi uh hi. 12 Babylon gama saltan khit ciangin Jeconiah in a neih a tapa Shealtiel, Shealtiel tapa Zerubbabel, 13 Zerubbabel tapa Abiud, Abiud tapa Eliakim, Eliakim tapa Azor, 14 Azor tapa Zadok, Zadok tapa Achim, Achim tapa Eliud, 15 Eliud tapa Eleazar, Eleazar tapa Matthan, Matthan tapa Jacob, 16 Jacob tapa Joseph hi a, Joseph in Khazih a kici Zeisu a hong suahna Mary pasal ahi hi. 17 Tua hi a, Abraham khang panin David khang ciang a vekin khang sawm le khang li, David khang panin Babylon gama saltang dinga a kimat hun ciang khang sawm le khang li, Babylon gama saltan hun pan Khazih khang ciang khang sawm le khang li mah ahi hi. 18 Zeisu Khazih a suahzia hih bang ahi hi. A nu Mary pen Joseph zi dingin zuthawl kipiasa hi a, a kiteenma un Kha Siangtho hangin gai hi ci in kithei hi. 19 A lawmpa Joseph in mi lungsim hoih hi a, a lawmnu Mary min daisak nuamlo ahih manin maksim dingin a ngaihsun hi.")
//.font(fsc.fontSize)
.font(.system(size: CGFloat(fontSize)))
.foregroundColor(.primary)
//.font(Setting(fontSizeIndex: self.$fontSizeIndex))
.multilineTextAlignment(.leading) // test .center here
.lineSpacing(5)
.padding()
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
HStack {
NavigationLink(destination: Setting(), label: {
Image(systemName: "gearshape")
})
}
}
}
}
}
}
struct Scripture_Previews: PreviewProvider {
static var previews: some View {
Scripture()
}
}