Error handling for network calls in Flutter

Introduction

Network calls can fail for many reasons like no internet or server problems. Handling errors helps your app stay friendly and avoid crashes.

When fetching data from the internet like loading user info or images.

When sending data to a server, for example submitting a form.

When your app depends on online services and you want to show messages if something goes wrong.

When you want to retry a request if it fails the first time.

When you want to show a loading spinner and then either data or an error message.

Syntax

Flutter

try {
  final response = await http.get(Uri.parse('https://example.com'));
  if (response.statusCode == 200) {
    // process data
  } else {
    // handle server error
  }
} catch (e) {
  // handle network or parsing error
}

Use try-catch to catch errors that happen during the network call.

Check response.statusCode to see if the server responded successfully.

Examples

This example tries to get data and prints messages for success, server error, or network error.

Flutter

try {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    print('Data loaded');
  } else {
    print('Server error: ' + response.statusCode.toString());
  }
} catch (e) {
  print('Network error: ' + e.toString());
}

This example shows catching an error when the URL is bad or unreachable.

Flutter

try {
  final response = await http.get(Uri.parse('https://badurl'));
  // This will throw and go to catch
} catch (e) {
  print('Failed to connect: ' + e.toString());
}

Sample App

This Flutter app shows a message on screen. When you tap the button, it tries to load data from the internet. It updates the message to show loading, success, server error, or network error.

Flutter

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: NetworkExample());
  }
}

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

  @override
  State<NetworkExample> createState() => _NetworkExampleState();
}

class _NetworkExampleState extends State<NetworkExample> {
  String _message = 'Press button to load data';

  Future<void> _loadData() async {
    setState(() {
      _message = 'Loading...';
    });
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      if (response.statusCode == 200) {
        setState(() {
          _message = 'Data loaded successfully!';
        });
      } else {
        setState(() {
          _message = 'Server error: ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _message = 'Network error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Network Error Handling')),
      body: Center(child: Text(_message, textAlign: TextAlign.center)),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadData,
        tooltip: 'Load Data',
        child: const Icon(Icons.cloud_download),
      ),
    );
  }
}

Important Notes

Always update UI inside setState() when using StatefulWidget.

Network errors include no internet, timeout, or bad URLs.

Server errors mean the server responded but with an error code like 404 or 500.

Summary

Use try-catch to handle errors during network calls.

Check response.statusCode to handle server responses properly.

Show friendly messages to users when errors happen.