How I Debugged a Mobile Development Tutorial App

Prelude

Mobile development involves building software that runs on mobile devices, called mobile apps. It has become very popular due to the proliferation of mobile devices around the world. This popularity enticed me to mobile development while recently studying computer science in school.

Haven decided to learn mobile development, I researched the best tool to use and discovered that Flutter was a highly recommended one. Flutter is a cross-platform UI development framework recently released by Google and is mostly used in mobile development.

The framework is built on the dart programming language and has become very popular despite being around for just a few years. Flutter was very promising; hence, I decided to learn it.

I downloaded flutter tutorials from YouTube and started learning. After I was through with installing Flutter and practicing Dart and Flutter fundamentals, I decided to build an app. I then downloaded a tutorial from YouTube on how to build a chat app with Flutter and firebase.

It was about 8 hours long, so I was confident I would master app development with Flutter after the tutorial.

As I usually did, I first spent time watching the tutorial from start to finish before beginning to code along on the second watch. This was over a couple of days though as I took breaks to do other things.

However, after spending all that time understanding the tutorial, when It was time to code along a few days later, I began having syntax errors from the very first dart file I created (the login page) in the lib folder.

Imagine my disappointment. I already practiced Flutter basics with the same setup, so how could all my code now be errors?

I first assumed that I must have made mistakes and typed different codes from what the instructor was typing. I restarted the tutorial and squinted at the screen while paying full attention to what the instructor was saying and typing. Then I paused the screen before typing the code.

Again, red lines trailed my code to disappoint me with syntax errors.

I was just dumbfounded. How could code be working on the instructor’s end and not working on mine?

I then decided to overrule my earlier decision not to use the instructor’s code on GitHub (so as to master flutter syntax). I visited Youtube, searched for the tutorial video, and in the description, I clicked on the GitHub link from where I downloaded the complete source code for the app.

Then I opened the project on my visual studio code, and my mouth hung open. The entire source code with more than a dozen files was decorated with red lines everywhere, screaming error!

At that point, like most beginners, the main thought in my head was just to give up.

A True Developer

A lot of people imagine that software development is just about typing code into your computer, but the truth is that a greater amount of time is often spent debugging and maintaining the software than actually coding it.

Hence, one cannot truly become a software developer without spending a painful amount of time finding solutions to bugs. It’s what actually creates great developers in the long run because after spending time debugging your code, you learn to write less “buggy” code from the start.

So, back to my story…

I left the code alone wondering if I should just give up on Flutter. I just didn’t understand how I could learn to write my own code if I couldn’t even successfully repeat what an instructor has already done.

Then I hovered over the red lines and tried following the suggestion of VS code on correcting the error. It worked in some places but didn’t in others.

I started thinking again. I most likely made mistakes while installing Flutter and the development tools. Trying to fix that would be a lot of trouble.

Then I had an idea; how about you just google this confusing problem and see? And so I did.

Stack Overflow to the Rescue

Turned out that the error was not as mysterious as I thought. Other people had encountered the same problem too and some had discovered solutions that they posted on stack overflow.

The problem was that the tutorial was from years ago, and the code was not very compatible with the newer version of Flutter I had installed. That was why some of the syntax corrections from VS code suggestions worked.

So, I tried a prominent suggestion from stack overflow; run “flutter pub get” to download all necessary dependencies in your code. It worked to my surprise!

I could’ve given up on learning mobile development for something as simple as a single line of command.

To Conclude:

Encountering bugs is always very frustrating, especially if you are learning to code on your own and don’t have someone to teach you the solution. It’s even worse when you are following a tutorial you may have spent resources to get, and the code from the book or video doesn’t work on your end.

Don’t give up. I end with the following best practices;

• Whatever the error is, know that it is fixable.

• Try to use the most recent tutorials you can find to avoid errors.

• If you have to use an old tutorial, ensure to install the specific version of the development tools used in the tutorial.

• Others have likely encountered any bug you are currently battling; check it out on stack overflow and other online forums.