Beginning Flutter Debugging

During the process of developing apps, you could encounter errors. Other times, your app might not work as expected and this can be really fraustrating. Debugging is the process of finding these problems otherwise known as “bugs” and fixing them. Flutter provides us with different tools and resources to help detect these pesky bugs and monitor our apps.

To debug a problem, there are basic steps that we could follow to make the debugging process easier. First, you need to recognize a Bug Exists. This could be evident when an app functionality does not work as expected or when an error occurs.

Next, you find the source of the Bug. This is where the main work takes place. This involves testing and isolating suspected portions of our code to figure out the area of our code causing the bug.

After that, you figure out the cause of the Bug. You’ve done a good job by locating the source of the bug. Now, you need to find out the cause. Good knowledge of how your code works is expected here. There are no fixed causes of bugs because every app is unique but there are common factors that could be lead to bugs.

These could be logic errors (ie where the code you wrote is different from what you expect it to do), unexpected inputs, wrong references and problems arising from external systems that your app interacts with.

The list is endless and debugging is a skill which is built over time as you gain more knowledge. After figuring out the cause of the bug, you need to suggest a Fix for the Bug.

This could involve correcting the code if it was a logic error, writing code to handle edge cases, handling exceptions properly and whatever fix that could solve the problem.

Sometimes, the severity of the bug might be so high that you’ll end up rewriting a large portion of your app or even the entire app. This is mainly caused when you fail to design your app properly. You need to always plan before you code.

Now you know what to do, its time to fix and Test your code. Here you apply the fix and verify your code works as expected. First, you test your code manually and then you check if your changes affected other areas of your app in an undesirable way. This is best done with automated tests which are just scripts that execute parts of your code to expect a result that shows your code works correctly. We’ll be using these steps as a guide to fix bugs in our code.

In this beginner course, you’ll learn the basics of debugging. We’ll cover:

• Breakpoints; which gives us control to execute our apps step by step
• Dart Devtools; which is a tool that provides different utilities for debugging and monitoring our apps.
• How to read and understand Stack Traces
• Ways to Prevent some Bugs from occuring
• Techniques to debug Layout related issues
• And many more concepts…

Together, we’ll fix some bugs and Layout issues using both Android Studio and Visual Studio Code. So let’s get started.