HTTP Anfragen in Flutter

Viele Seiten im Internet bieten zusätzlich zu ihrer normalen Funktionalität eine restige Schnittstelle an. Um auf diese zuzugreifen muss eine HTTPAnfrage gestellt werden, wie das mit Flutter funktioniert wird in diesem Artikel behandelt.

Eigentlich ist es ganz einfach. Zunächst fügen wir die aktuellste Version der http Biliothek hinzu. (Zu finden auf Pub.dev)

http: ^0.13.3

Diese importieren wir dann (am Besten direkt als Variable) in unser Projekt.

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

Mit der Biliothek kann jetzt eine Anfrage auf eine Uri gestartet werden. Im Beispiel starte ich eine HTTP Anfrage auf eine Chuck Norris Witz API.

final response = await http.get(
    Uri.parse("https://api.chucknorris.io/jokes/random"),
);  

Um sicherzustellen das alles geklappt hat sollten wir den statusCode überprüfen (200 bedeutet OK).

if (response.statusCode == 200) {  

Wenn wir Statuscode OK haben können wir den response.body decodieren.

var result = jsonDecode(response.body);

Die Variable result erhält nun die JSON Struktur abgebildet auf DartDatentypen. Damit lässt sich arbeiten. Nun kann man auf den Wert des Witzes zugreifen.

_fact = result["value"];

Hier noch einmal der gesamte Code:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  var _fact = "";
  var _isLoading = true;
  @override
  void initState() {
    super.initState();
    _requestFact();
  }
  _requestFact() async {
    final response = await http.get(
      Uri.parse("https://api.chucknorris.io/jokes/random"),
    );
    if (response.statusCode == 200) {
      var result = jsonDecode(response.body);
      setState(
        () {
          _fact = result["value"];
          _isLoading = false;
        },
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? CircularProgressIndicator()
          : Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Text(
                      _fact,
                    ),
                  ),
                ],
              ),
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: _requestFact,
        tooltip: "New Fact",
        child: Icon(Icons.refresh),
      ),
    );
  }
}