Flash Card View

App Development
1

Hey :wave: I wanted to build a flash card like this one:

IMG_ED7412943B61-1
IMG_ED7412943B61-1544Ă—705 143 KB

Until now I was able to do this, this is the code:

struct categoryImageview: View {
    let category: MainInformation.Category
    
    var body: some View{
        ZStack(alignment:.bottom) {
                Image("\(category.rawValue)")
                    .resizable()
                    .aspectRatio(contentMode:.fit)
                    .cornerRadius(20)
                    .frame(width: 380,height: 300)
                VStack {
                    Rectangle()
                        .foregroundColor(.black.opacity(0.2))
                        .background(.ultraThinMaterial)
                        .cornerRadiusSpecific(radius: 20, corners: [.bottomLeft,.bottomRight])
                        .frame(width: 380, height: 80)
                        .overlay {
                            HStack {
                                Text("\(category.rawValue)")
                                        .foregroundColor(.white)
                                        .font(.system(size: 35))
                                        .padding(.horizontal,10)
                                Spacer()
                            }
                        }
                }
            }
        
    }
}

Anyone knows a better way to build it.

2

the result of the code:

Screenshot 2023-08-13 at 5.13.45 PM
Screenshot 2023-08-13 at 5.13.45 PM592Ă—830 302 KB

3

This would be the way I would do it, there’s always a “better” way, you can do everything a million different ways. but what’s “better” is relative to whoever you ask.

Also next time surround your code in backticks, for it to be formatted properly (see how I edited your post)

1 Like
4

I like the design! It’s looking simple and sleek.

Regarding the code, judging from the “category.rawValue”, I’m guessing the category of type MainInformation.Category is a Codable String enum. You’re using the raw value for both the Image and the title of the card. In a big app I would probably separate those things in the enum, having like:

enum Category: Codable, String {
   case breakfast, lunch // etc
   var title: String {
     switch self {
        case .breakfast: return "Breakfast"
     }
   }

  /// Reference for the image
  var image: String {
    switch self {
       case .breakfast: return "whatever consistent naming conventions your asset files follow"
    }
  }
}

But it’s totally not necessary and your way works very well as well.

1 Like