sofapanda

Learning Flutter

So, now the time has come. After spending the last few years developing iOS apps using Swift and SwiftUI, I’d like to reach more friends with my apps.

I already have an idea for my next project, but most of the people around me don’t own an Apple device. This makes it difficult for me to get feedback and to push the app on my friends, at least in the beginning.

All right, I like SwiftUI a lot, unfortunately, and I’ve developed a routine and gained experience by now. Damn it, I like SwiftUI.

So the first teaching material bought was a course on Udemy, was just on offer. I thought, what can I do wrong with that?

Oh boy, was that bang not fun. I couldn’t follow the course man, I found and still find working with flutter ugly and it annoys me to see these structures.

So I quit the course sad and dissatisfied and ate ice cream in shame for many weeks.

Now I fell for the Flutter course from Freecodecamp. What a load of crap, I’m enjoying it and feel like I’m learning something. It drags a bit, but I’m keeping up well. Even though I find Flutter unspeakably ugly. Well, maybe I’ll learn to love this infection, like the satisfying scratching of the throat.

I can’t report any more at the moment, but I’ll try to take you with me on this journey. If I don’t drop out again, my goodness what ugly….

So now it’s happened, I set about recording a video for YouTube.

How excited am I? Watch the video… It’s hardly bearable 🙂

What’s going to be on the channel?

I think there will be videos about the progress of my projects and possibly tutorials. Where the journey will go I can’t say yet. It is also not yet clear whether more videos will appear. At the moment I am on holiday and therefore have time to deal with such topics.

Just watch the video:

Hello everyone,

I used the holiday to continue working on the diary app.

Lastly, I added a button that will allow the user to choose between different types of entries.

In my imagination, the user should be able to create a comprehensive entry with the possibility to insert different media.
In addition, the user will be able to create a photo or voice entry easily and quickly.

For this, I work on the controls daily and try to find a healthy balance between possibilities and complexity.

On the one hand, I would like to offer every user all the functions so that they can customise their entries as much as possible. On the other hand, however, the buttons required for this can seem dauntingly complex.

Fortunately, the app is still in development and will change daily.

Here is a video about the current state of affairs:

Hello everyone,

It’s raining, it’s cold, the dog is wet and asleep.

The best chance to work on the new diary app.

Today I created the interface for the screens to select the date and location.

You can see the result of this morning’s work here:

Hello everyone,

Today I worked on the diary app again. We are still very much at the beginning, but I am pleased to be able to present you with progress again.

Small but nice, the size of the text field now adapts to the free space on the display.

I have implemented this behaviour by hiding most of the other input fields and buttons. In addition, the text field shrinks by the height of the iOS keyboard. This way, neither the buttons nor the input are covered.

I think this is a good deal between design and usability.

Here is a short video:

Ahoy there, everyone,

Slowly but surely I keep finding some time to work on my new app. It’s amazing how much time such a young dog demands from you. But it is a wonderful time.

Good so made some tea and got back to work.

Today I did some work on the UI. I guess one obstacle is my way of working.

I always work from point to point. I usually open my laptop, start a podcast and have no idea what is being worked on. I start XCode and the simulator and then I just try something until I get something I like.

And this way works amazingly well for me. Drawing and prototyping I tried everything, but this work bores me a lot and I prefer to work in the code of the app and see what is possible and feasible in the simulator. Now I have to load Test Flight and try it out again and again on my own mobile phone. Maybe open and test again and again for a few days, I’m not pressed for time.

So today I worked on the buttons for the media you can add to posts.

Here is the code:

struct MediaButton: View {
    
    @State private var isEmpty : Bool = true
    
    var icon : String
    
    var amount : Int

    var body: some View {
        ZStack(alignment: .leading) {
            
            Rectangle()
                .cornerRadius(7, corners: [.topRight, .bottomRight])
                .cornerRadius(50, corners: [.topLeft, .bottomLeft])
                .foregroundColor(Color("water"))
                .opacity(isEmpty ? 0 : 1)
            
            
            HStack {
                Button {
                    withAnimation(.spring()) {
                        isEmpty.toggle()
                    }
                } label: {
                    Image(icon)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 30, height: 30)
                        .frame(width: 40, height: 40)
                        .background(Color("midGray"))
                        .cornerRadius(50, corners: isEmpty ? [.bottomRight, .bottomLeft, .topLeft, .topRight] : [.topRight, .bottomRight])
                        .cornerRadius(isEmpty ? 50 : 7, corners: [.topLeft, .bottomLeft])
                    
                }
                if !isEmpty {
                    Spacer()
                    Button {
                        withAnimation(.spring()) {
                            isEmpty.toggle()
                        }
                        
                    } label: {
                        Text("\(amount)")
                            .font(Font.custom("Bitter-Bold", size: 16))
                            .foregroundColor(Color("lightCreme"))
                    }
                    Spacer()
                }
            }
            
        }.frame(width: isEmpty ? 40 : 90, height: 40)
    }
}

Maybe you can do something with the code, you can see the result here:

Well, enough for today. Stay fresh and nice…