Hello everyone, welcome to the channel. Today, we are taking a deep dive into a fantastic topic: how to boost your Flutter development speed using Open AS ChatGPT. So let’s jump right in.
These are the wireframes that have been assigned to code, and I have coded most of them. Let me show you the state of the application right now.
This is the application as you can see. I’ll just show where I’m supposed to put the animation at. Let’s press ‘Get Started’.
I’ll write my name, continue. This is a nice animated opacity animation. So over here, this is where I’m supposed to create an animation when the user taps on it. Right now, there is no animation, it just moves on to the next style. So when the user taps on this, it should show a swipe animation that these list items swipe out of the screen to the left edge. This is what I have to create for both of these screens.
Okay, so let’s go prompt Open AS ChatGPT on what we should do. Basically, this is what I have prompted GPT: that I have a standard UI and Flutter with a ListView that contains four containers inside it. I want to create a swipe kind of animation when the user clicks the submit button. I want the list to disappear in a random speed towards the left side.
Okay, so this is what Open AS ChatGPT is suggesting: to use an animations package. And then it has given out the sample code to me. So let’s start implementing this code and see what we can do with it.
So here, I can see two functions that are just created: one is ‘submit’ and one is ‘slideOutItem’. So let’s copy these functions. Basically, I don’t want to copy the whole code and test it out. I’ll copy the important bits.
Now, obviously, there will be a bunch of errors. So to remove those errors, let me copy more of the code. This is one of the errors that I have not copied: ’listItems’. Okay, now we have one error remaining. Okay, let’s see if we missed anything.
Let’s see now what GPT has created for us. Okay, I’ll just go through this quickly. This is what I wanted. This is actually what I had in my mind. So okay, Open AS ChatGPT has created this for us. Now, the only thing left for me to do is basically I have these two lists: ’listOfGoals’ and ’listOfLevels’. I basically have to figure out a way to replace this list items and pass in these two lists and set.
Let me do that and let’s see what we end up with.
Okay, so I have basically implemented this, implemented these sections. I have created these two lists and inside the ‘initializeList’ function, I have basically initialized these two lists. So basically, all that’s left for me to do is go uncomment this ‘submit’ button line that I’ve commented for the purpose of the video.
So let me just uncomment these and in the ‘submit’ function, I am basically passing in the list because now we have two lists. So I’ll have to pass which list I am talking about. So let me just do this. Okay, so now, okay, Open AS ChatGPT actually created this for us and yeah, this was nice. So basically, using Open AS ChatGPT, you can actually supercharge your Flutter development.
Okay, so this is basically the bonus section of the video if you stuck around till the end. So this is for you. Okay, Sigma recently launched a Dev mode inside it. And basically, if we just switch on this toggle and I have this Figma designs over here, I’ll just select this container and you see if I select Flutter over here, okay, Figma to Flutter, Figma to code, these are the all spotted codes.
If I select Flutter over here, it’ll just give the whole code to me. Now, this code is not production-ready obviously because it’s using a lot of stacks. But for simpler items like text, it’ll easily take us a minute or 30 seconds to do this. Now, with the help of Sigma, well, we can just simply copy you from here and just paste it in a Flutter application.
So yeah, use this tool. It’s a supercharge your Flutter development. Thanks for watching the video. Subscribe to my channel for more videos like this, and I will see you, I guess, sometime soon. Okay, bye.
