How to Make GET Request in Flutter: Simple Guide

To make a GET request in Flutter, use the http package and call http.get() with the URL. Then, handle the response asynchronously to get the data.

Syntax

Use the http.get() method to send a GET request. It requires a Uri object representing the URL. The method returns a Future<http.Response> which you await to get the response.

• Uri.parse(url): Converts a string URL to a Uri object.
• http.get(): Sends the GET request.
• await: Waits for the response asynchronously.
• response.body: Contains the response data as a string.

dart

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

Future<void> fetchData() async {
  final url = Uri.parse('https://example.com/data');
  final response = await http.get(url);
  if (response.statusCode == 200) {
    print(response.body);
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

Example

This example shows a Flutter app that makes a GET request to fetch JSON data from a public API and displays the result on screen.

dart

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

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String data = 'Loading...';

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      setState(() {
        data = 'Title: ' + jsonData['title'];
      });
    } else {
      setState(() {
        data = 'Failed to load data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GET Request Example')),
        body: Center(child: Text(data)),
      ),
    );
  }
}

Output

App screen shows: Title: delectus aut autem

Common Pitfalls

• Not adding http package to pubspec.yaml causes import errors.
• Forgetting to use Uri.parse() on the URL string leads to type errors.
• Not awaiting the http.get() call causes unexpected behavior.
• Ignoring HTTP status codes can cause app crashes or wrong data handling.
• Performing network calls on the main thread without async/await blocks the UI.

dart

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

// Wrong: Passing string directly without Uri.parse
Future<void> wrongRequest() async {
  // final response = await http.get('https://example.com'); // Error
}

// Right:
Future<void> rightRequest() async {
  final url = Uri.parse('https://example.com');
  final response = await http.get(url);
}

Quick Reference

Remember these key points when making GET requests in Flutter:

• Always add http package in pubspec.yaml.
• Use Uri.parse() to convert URL strings.
• Use await to wait for the response.
• Check response.statusCode before using data.
• Handle errors gracefully to avoid crashes.

Key Takeaways

Use the http package and call http.get with a Uri to make GET requests.

Always await the GET request and check the response status code.

Convert URL strings to Uri objects using Uri.parse before requests.

Add the http package to pubspec.yaml to avoid import errors.

Handle network errors and update UI asynchronously to keep app responsive.