Flutter Debugging

Debugging Tools

print('Debug: $value');

// Set breakpoint
debugger();

flutter pub global
activate devtools

Exception: Error
at line 42

🔹 Using Print Statements

The simplest way to debug:

import 'package:flutter/material.dart';

class DebugExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('🔵 Building DebugExample widget');
    
    String username = 'John';
    print('👤 Username: $username');
    
    int age = 25;
    print('📅 Age: $age');
    
    List items = ['Apple', 'Banana', 'Orange'];
    print('🛒 Items: $items');
    print('📊 Item count: ${items.length}');
    
    return Scaffold(
      appBar: AppBar(title: Text('Debug Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            print('🔘 Button pressed!');
            print('⏰ Time: ${DateTime.now()}');
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

🔹 Using Breakpoints

Pause execution to inspect variables:

class Calculator {
  int add(int a, int b) {
    // Click left of line number to set breakpoint
    int result = a + b; // ← Set breakpoint here
    return result;
  }
  
  void calculate() {
    int x = 10;
    int y = 20;
    
    // When breakpoint hits, you can:
    // - Check x and y values
    // - Step through code line by line
    // - Watch variable changes
    int sum = add(x, y);
    
    print('Sum: $sum');
  }
}

// Steps to use breakpoints:
// 1. Click left margin to add red dot
// 2. Run in Debug mode (F5)
// 3. App pauses at breakpoint
// 4. Inspect variables in Debug panel
// 5. Use Step Over (F10) to continue

🔹 Debug Console Commands

Useful commands while debugging:

🔹 Flutter DevTools

Powerful visual debugging tools:

# Install DevTools
flutter pub global activate devtools

# Run DevTools
flutter pub global run devtools

# Or open from VS Code
# Click "Dart DevTools" in debug toolbar

🔹 Common Errors & Solutions

How to fix typical Flutter errors:

🔸 Null Safety Error

// ❌ Error: Null check operator used on null value
String? name;
print(name!.length); // Crashes!

// ✅ Solution: Check for null first
String? name;
if (name != null) {
  print(name.length);
}

// ✅ Or use null-aware operator
print(name?.length ?? 0);

🔸 Widget Overflow Error

// ❌ Error: RenderFlex overflowed
Row(
  children: [
    Text('Very long text that exceeds screen width...'),
  ],
)

// ✅ Solution: Use Expanded or Flexible
Row(
  children: [
    Expanded(
      child: Text('Very long text that exceeds screen width...'),
    ),
  ],
)

🔸 setState Error

// ❌ Error: setState called after dispose
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  @override
  void dispose() {
    super.dispose();
  }
  
  void updateData() {
    // ✅ Check if mounted before setState
    if (mounted) {
      setState(() {
        // Update state
      });
    }
  }
}

🔹 Debug Mode vs Release Mode

Understanding different build modes:

🔹 Logging Best Practices

Better than print() for production:

import 'dart:developer' as developer;

class LoggingExample {
  void demonstrateLogs() {
    // Simple print (removed in release)
    print('Simple message');
    
    // Developer log (better for debugging)
    developer.log('User logged in', name: 'Auth');
    
    // Log with details
    developer.log(
      'API call failed',
      name: 'Network',
      error: 'Connection timeout',
      level: 1000, // Error level
    );
    
    // Log with object
    Map userData = {
      'id': 123,
      'name': 'John',
    };
    developer.log(
      'User data',
      name: 'UserService',
      error: userData,
    );
  }
}

🔹 Assert Statements

Catch bugs during development:

class ValidationExample {
  void processAge(int age) {
    // Assert only runs in debug mode
    assert(age >= 0, 'Age cannot be negative');
    assert(age <= 150, 'Age seems invalid');
    
    print('Processing age: $age');
  }
  
  void processName(String? name) {
    assert(name != null, 'Name is required');
    assert(name!.isNotEmpty, 'Name cannot be empty');
    
    print('Hello, $name');
  }
}

void main() {
  var validator = ValidationExample();
  
  validator.processAge(25);  // ✅ Works
  // validator.processAge(-5);  // ❌ Assertion fails in debug
  
  validator.processName('John');  // ✅ Works
  // validator.processName('');  // ❌ Assertion fails in debug
}

🔹 Debugging Tips

Pro tips for effective debugging: