❖ Welcome to Param Classes!

When developing a Flutter application, you may sometimes face errors, unexpected results or application crashes. A button may not work, data may not display correctly, or an application may stop running.

These problems are commonly called bugs.

Debugging is the process of finding, understanding and fixing problems in your application. Flutter developers use tools such as Android Studio, Visual Studio Code and Flutter DevTools to identify errors and improve application performance.

For example, suppose you create a login screen. When a user enters the correct username and password, the application should open the dashboard. But if the dashboard does not open, you need to investigate the problem.

In this tutorial, you will learn how to debug Flutter applications using Android Studio and VS Code with practical examples.

✦ 1. What Is Debugging in Flutter?

Debugging means identifying and fixing errors in a program.

During application development, different types of errors can occur.

1. Syntax Errors

These errors happen when code does not follow Dart programming rules.

Example:

void main() {
  print("Hello Flutter"
}

The closing parenthesis is missing, so the code will produce a syntax error.

2. Runtime Errors

These errors happen while the application is running.

Example:

int result = 10 ~/ 0;

Dividing an integer by zero causes a runtime exception.

3. Logical Errors

These errors happen when the application runs but produces an incorrect result.

Example:

int price = 500;
int quantity = 2;

int total = price + quantity;

print(total);

The expected total is 1000, but the code prints 502 because addition was used instead of multiplication.

Debugging helps developers identify and correct all these problems.

✦ 2. Debugging Tools in Flutter

Flutter provides several tools to help developers find and fix problems.

Android Studio

Android Studio provides a complete development environment with debugging tools, breakpoints, variable inspection and Logcat.

Visual Studio Code

VS Code provides Flutter and Dart extensions, a debugger, breakpoints and a Debug Console.

Flutter DevTools

Flutter DevTools provides additional tools for inspecting widgets, performance, memory and application behavior.

Official documentation:

https://docs.flutter.dev/tools/devtools

✦ 3. Set Up Flutter Debugging in Android Studio

First, open Android Studio.

Follow these steps:

1. Open Android Studio.

2. Open your Flutter project.

3. Make sure the Flutter and Dart plugins are installed.

4. Connect an Android device or start an emulator.

5. Select your device from the device selector.

6. Open lib/main.dart.

7. Click the Debug icon or select Debug from the Run menu.

Android Studio will start your Flutter application in debug mode.

You can now use the debugger to inspect the application while it is running.

Important: Running an app normally and running it in debug mode are different. Debug mode provides tools such as breakpoints and variable inspection.

✦ 4. Set Up Flutter Debugging in VS Code

VS Code is another popular editor for Flutter development.

Follow these steps:

1. Open Visual Studio Code.

2. Open your Flutter project folder.

3. Open the Extensions section.

4. Install the Flutter extension.

5. The Dart extension should also be installed.

6. Connect an Android device or start an emulator.

7. Open lib/main.dart.

8. Select Run and Debug from the sidebar.

9. Click Start Debugging.

You can also press:

F5

VS Code will launch the application in debug mode.

Official documentation:

https://docs.flutter.dev/tools/vs-code

✦ 5. Understand Breakpoints in Flutter

A breakpoint is a point in your code where the debugger temporarily pauses execution.

Breakpoints help developers inspect what is happening inside a program.

Let's create a simple example.

void main() {
  int price = 500;
  int quantity = 2;

  int total = price * quantity;

  print(total);
}

How to add a breakpoint in Android Studio:

1. Open the Dart file.

2. Find this line:

int total = price * quantity;

1. Click the area beside the line number.

2. A red breakpoint marker will appear.

3. Start debugging.

When execution reaches this line, the debugger pauses.

You can inspect the values of price, quantity and other variables.

How to add a breakpoint in VS Code:

1. Open the Dart file.

2. Click the left margin beside the required line.

3. A red breakpoint indicator appears.

4. Press F5 to start debugging.

5. When execution reaches that line, VS Code pauses the application.

Breakpoints are useful when you want to understand how data changes during application execution.

✦ 6. Understand the Debug Console

The Debug Console displays debugging information and helps developers inspect values.

Consider this example:

void main() {
  String studentName = "Rahul";
  int marks = 85;

  print("Student Name: $studentName");
  print("Marks: $marks");
}

Output:

Student Name: Rahul
Marks: 85

In Flutter, you can also use:

debugPrint("Flutter application started");

For example, inside a button click function:

void login() {
  debugPrint("Login button clicked");
}

When the button is pressed, you can check the Debug Console to see the message.

This is a simple way to understand whether a function is being called.

✦ 7. Practical Debugging Example in Flutter

Now let's create a small Flutter application and debug a button click.

Open lib/main.dart and write:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const DebugScreen(),
    );
  }
}

class DebugScreen extends StatefulWidget {
  const DebugScreen({super.key});

  @override
  State<DebugScreen> createState() => _DebugScreenState();
}

class _DebugScreenState extends State<DebugScreen> {
  int counter = 0;

  void increaseCounter() {
    debugPrint("Button clicked");

    setState(() {
      counter++;
    });

    debugPrint("Current Counter: $counter");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Debugging"),
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "Button Click Counter",
              style: TextStyle(fontSize: 20),
            ),

            const SizedBox(height: 15),

            Text(
              "$counter",
              style: const TextStyle(
                fontSize: 35,
                fontWeight: FontWeight.bold,
              ),
            ),

            const SizedBox(height: 20),

            ElevatedButton(
              onPressed: increaseCounter,
              child: const Text("Increase Counter"),
            ),
          ],
        ),
      ),
    );
  }
}

What happens in this application?

1. The initial counter value is zero.

2. The user clicks the button.

3. The increaseCounter() function runs.

4. A debug message appears in the console.

5. setState() updates the counter.

6. The updated counter value appears on the screen.

Practical debugging exercise:

Add a breakpoint inside the increaseCounter() function.

Run the application in debug mode and click the button.

Observe how the value of counter changes each time you press the button.

✦ 8. Use Flutter DevTools

Flutter DevTools is a collection of debugging and performance tools.

It helps developers inspect the internal behavior of their Flutter applications.

Some important DevTools features are:

1. Widget Inspector

Helps inspect the widget tree and understand how widgets are arranged.

2. Performance View

Helps identify performance problems and slow frames.

3. Memory View

Helps examine memory usage.

4. Logging View

Helps inspect application logs.

5. Network View

Where supported by the application and tooling setup, network information can help investigate API requests.

To learn more about Flutter DevTools, visit:

https://docs.flutter.dev/tools/devtools

You can launch DevTools from supported IDE integrations or through the Flutter tooling.

✦ 9. Debug Flutter Application Errors

Sometimes your application may display errors in the console.

Let's understand some common examples.

Error 1: Null Check Operator Used on a Null Value

Example:

String? name;

print(name!);

The variable name contains null, but the code uses the null assertion operator.

A safer approach is:

String? name;

if (name != null) {
  print(name);
} else {
  print("Name is not available");
}

Error 2: RenderFlex Overflow

This error commonly occurs when widgets need more space than the available screen size.

Possible solutions include:

• Use Expanded.

• Use Flexible.

• Use SingleChildScrollView.

• Adjust widget dimensions.

Error 3: setState Called After dispose

This can happen when an asynchronous operation completes after a screen has been removed.

Check whether the widget is still mounted before updating its state:

if (!mounted) return;

setState(() {
  // Update state here
});

Error 4: API Request Failed

If your Flutter app cannot retrieve data from a backend, check:

• API URL.

• Internet connection.

• Server response.

• HTTP status code.

• JSON response format.

✦ 10. Useful Flutter Debugging Commands

Flutter provides command-line tools that help developers investigate application problems.

Check Flutter installation:

flutter doctor

Check connected devices:

flutter devices

Run the application:

flutter run

Run with verbose logs:

flutter run -v

Analyze Dart code:

flutter analyze

Run Flutter tests:

flutter test

These commands are useful when debugging applications from the terminal.

✦ 11. Best Practices for Flutter Debugging

Follow these practices when debugging real-world applications:

• Read the complete error message.

• Check the file name and line number mentioned in the error.

• Use breakpoints for complex logic.

• Use debugPrint() for temporary debugging information.

• Inspect variable values.

• Test one problem at a time.

• Check API responses during backend integration.

• Remove unnecessary debug messages before release.

• Use Flutter DevTools to investigate performance issues.

• Test applications on real devices as well as emulators.

✦ 12. What You Learned

In this tutorial, you learned:

• What debugging means in Flutter.

• Different types of programming errors.

• How to debug using Android Studio.

• How to debug using VS Code.

• How to set breakpoints.

• How to inspect variable values.

• How to use Debug Console.

• How to use Flutter DevTools.

• How to fix common Flutter errors.

• Useful Flutter debugging commands.

❖ Conclusion

Debugging is an important skill for every Flutter developer. It helps you understand application behavior, find errors and build reliable mobile applications.

Android Studio and VS Code provide powerful debugging features such as breakpoints, variable inspection and console logs. Flutter DevTools provides additional tools for understanding widgets, performance and memory usage.

At Param Classes, we focus on practical programming lessons that help beginners understand real-world application development. Practise the debugging example in this tutorial and try finding errors in your own Flutter projects.

Learn Today, Grow Tomorrow – Param Classes.