So, we have recently witnessed a release for ChatGPT-4o. And we have seen immense increase in its capabilities. That being said, the immediate question that arises in our minds is - Would it take our job as software developers?
Even my friends questioned me while i was discussing the topic with them. Before, we move ahead with this article. ChatGPT or any AI would be your assistant always and not a mainframe senior developer. But, you have to start applying the AI in your daily workings and learn how to use it effectively and there goes the fear out of the window. And when you start using it effectively, your productivity would increase immensely. So start it now my friend.
I released a youtube video on memory management a while back, see how easy it is to prompt things and understand.
Now getting to the exciting part you are waiting for.
Building your own mobile app might seem like a daunting task, especially if you’re not a tech-savvy person. However, with tools like Flutter and the guidance of AI-powered assistants like ChatGPT, it’s more accessible than ever. This beginner-friendly guide will take you through the steps of creating a basic Flutter app with the help of ChatGPT, even if you have little to no technical background.
What is Flutter?
Flutter, Google’s revolutionary open-source UI toolkit, empowers developers to craft aesthetically pleasing apps for a multitude of platforms, including iOS, Android, web, and desktop — all from a unified codebase. Embrace Flutter’s efficiency to streamline your development process, and join a rapidly growing community relying on Flutter’s robust, scalable solutions for business and personal projects.
Flutter Basics — Dart Language
Flutter’s heart is the Dart programming language, known for its simplicity and familiarity with Java and C# developers. However, don’t worry if you’re new to Dart; ChatGPT’s capabilities ensure that even novices can jump into building their first app with ease.
Widgets are the cornerstone of your app’s interface in Flutter. These versatile components form a hierarchy, shaping everything you see on the screen. Delve into the world of widgets and understand how they orchestrate the look and feel of your app here.
Prerequisites
- Flutter is versatile. Install it locally or experiment with Dartpad for browser-based development.
- Access ChatGPT’s full potential with an account, or start with the free version for basic support. I am using the latest GPT4o.
Step 1 — Setting Up Your Environment
Before you build an app, you either need to set up the Flutter development environment on your computer, or you can use Dartpad, which allows you to create a Flutter app in the browser directly. Dartpad might be easier if you’ve never installed a development environment before. If you use Dartpad, you can skip the installation step.
Installing Flutter
Visit the official Flutter website and follow the instructions to download and install Flutter on your system.
Installing an Editor (IDE)
You’ll need an IDE (Integrated Development Environment) like Android Studio or Visual Studio Code. Both are user-friendly and offer great support for Flutter development. You can follow the instructions here, which are also on the official Flutter website.
Step 2 — Create the Project
Follow the instructions in this codelab to create your first Flutter project. You don’t need to follow the tutorial all the way through. You can just step through until you have a running app, which is an early step in this tutorial. When you press play, the app should eventually start and look like this:
Step 3 — Design Your App
The easiest way to get started is to draw your app as a wireframe with a tool like Figma or Draw.io. Figma is a full-fledged design tool, and it’s great because developers understand how to use it. However, Draw IO is free to use and allows you to build wireframes quickly. I took one for this article from dribbble and here is how it look likes.
You could even draw the image by hand with a tablet or scan it. ChatGPT will understand the general gist.
Step 4 — ChatGPT Writes the App
Choose ChatGPT 4 if you have the full version of ChatGPT, and click the button here to feed ChatGPT your design. If you don’t have the paid version of ChatGPT, you may need to explain the design in words.
The next important step is prompting ChatGPT. This is the secret sauce. Practicing your prompt engineering is the real key to getting the most from ChatGPT. It will think on the prompt and give you something like this.
Similarly, it would give you six screen which are also interconnected to each other. Wow, isn't that a great start. Imagine you doing all the basic stuff again and again by your precious hands. Just kidding, you need to have conceptual knowledge of the technology and what could go wrong. As ChatGPT can ONLY BE YOUR ASSISTANT.
Step 5 — Run The App
Hopefully, ChatGPT gave you a working sample. It doesn’t always get this right the first time, but in my case, it did. You shouldn’t see any red squiggly lines. If you see red squiggly lines, you may need more help from ChatGPT. Otherwise, run the app in the same way you ran it in step 2.
Step 6 — Further Prompting
Take a screenshot of the Flutter app that ChatGPT produced and feed it back to ChatGPT. Give it a prompt with instructions on what to do next. Again, prompting (and context) is the key to getting the most out of ChatGPT.
ChatGPT can sometimes be unpredictable. It sometimes gets too verbose and tries to explain too much, or it doesn’t give you all the code. In my case, it gave me a completely new version of the code.
Copy ChatGPT’s new code and paste it over the top of main.dart, then reload the app or run it again. As a general rule of thumb, you should iterating over this process, to get to the final app.
Can ChatGPT really build Flutter apps? Limitations apply
As this experiment proves, agents seem to work on smaller applications and can even fix the code they generated earlier. However, handling larger and more complex applications could prove problematic. The contextual knowledge needed to build such apps may be too expansive to fit in the token limit.
The AI tool should also take into account all the utilities and existing files and implementations. Otherwise, we can easily end up with multiple implementations of the same feature in multiple places, or changes done in one file breaking other files. Also, sometimes we work on more complex features that need to use multiple files in very specific ways, and AI could easily make mistakes here.
Another important thing to note is that these types of AI tools are not constantly trained on new updates, so they will inevitably use old or even depreciated code. This is especially true for Flutter since both Flutter and Dart have seen substantial changes in the last few years.
AI – Terrible lead engineer, great assistant
AI in development certainly has a case. Actually, many potential use cases. However, for now, they are probably best kept within the confines of the assistant role. That way, when they give outdated suggestions or just plain weird ones, the human eye can still easily dismiss them, and just stick to the useful parts.
A good example would be a partial automation of the code review process, where AI could start the review as soon as the code is pushed. That way, pieces of code would get flagged and marked as high priority for human reviewers. Ideally, this would require some contextual understanding, but should still work since AI wouldn’t actually be writing or modifying the code.
Further, every application requires performing some repetitive and not particularly challenging tasks. Normally, these are hard to automate because there are always newer versions that do something slightly differently. With AI, we can streamline this process.
By feeding AI tools all the information we have and giving it the latest documentation, we can easily automate repetitive tasks.
Now many of you asking about, how could we partner up for your development or consultation services.
That's what we do, but the caveat is we take projects and startups after a discovery call and understanding if we both are the right fit. As we come all in, with all we have.
Get your tech developed faster and better than market, without having to worry about the product ownership. Leave the fuss to us.
Feel free to request for my services and pricing at info@rohangirdhani.com. And you will straight away receive all the details about the same.
Or i love linkedin, you can just send "Tech Services" via dm.
Enjoyed this article, follow The Tech Saturday for more such insightful tech articles.