Flutter API Çağrısı

Bu yazımda Flutter uygulamasında nasıl API çağrılacağını göstereceğim. Kısaca API (Application Programming Interface), bir uygulamaya ait işlevleri, başka bir uygulamada da kullanmak için, işlevlerini paylaşan uygulamanın sağladığı arayüzdür.

Geliştirdiğimiz mobil uygulamaların çoğu interneti çeşitli amaçlarla kullanmak zorunda. Bu nedenle, Flutter’da API’lerden nasıl veri alınacağını öğrenelim.

Bu yazımda, JSON’da aşağıdaki verileri veren örnek bir API kullanacağım. https://jsonplaceholder.typicode.com/todos/2

Öncelikle http paketini Pubspec.yaml dosyanızı açın ve kurun.

dependencies:
  http: 0.12.2
  flutter:
    sdk: flutter

Not: Bu paket sürümü, bu makaleyi okurken güncellenmiş olabilir, lütfen her zaman en son sürümü yükleyin.

Http paketini aşağıda verilen şekilde içe aktarabilirsiniz.

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

API’den gelen veriyi Dart Nesnesine dönüştürmek istediğimiz için Data isminde bir model sınıfı oluşturup JSON yapısını dönüştürüyoruz.

class Data {
  final int userId;
  final int id;
  final String title;
  final bool completed;

  Data({this.userId, this.id, this.title, this.completed});

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      completed: json['completed']
    );
  }
}

Get metodunu kullanarak verileri API’den çekiyoruz.

Future<Data> fetchData() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/todos/2');
  if (response.statusCode == 200) {
    return Data.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Unexpected error occured!');
  }
}

Durumlu widget (stateful widget) kullanarak çekilen verileri görüntüleyebiliriz. Basit bir örnek olması için, yalnızca title bilgisini çektik.

Tam Kod:

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

Future<Data> fetchData() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/todos/2');
  if (response.statusCode == 200) {
    return Data.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Unexpected error occured!');
  }
}

class Data {
  final int userId;
  final int id;
  final String title;
  final bool completed;

  Data({this.userId, this.id, this.title, this.completed});

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
        userId: json['userId'],
        id: json['id'],
        title: json['title'],
        completed: json['completed']);
  }
}

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<Data> futureData;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter API',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter API Çağırma'),
        ),
        body: Center(
          child: FutureBuilder<Data>(
            future: futureData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              // By default show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Çıktı: