Flash Card View

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

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) {
                    .frame(width: 380,height: 300)
                VStack {
                        .cornerRadiusSpecific(radius: 20, corners: [.bottomLeft,.bottomRight])
                        .frame(width: 380, height: 80)
                        .overlay {
                            HStack {
                                        .font(.system(size: 35))

Anyone knows a better way to build it.

the result of the code:

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

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