Flutter: API Entegrasyonu ve JSON Veri Yönetimi

Statik verilerle tasarlanan uygulamalar bir vitrin gibidir; güzel görünürler ama etkileşimleri sınırlıdır. Bir uygulamanın gerçek gücü, hava durumu, döviz kurları, kullanıcı profilleri veya kendi hazırladığınız bir sunucudaki (örneğin bir Django projesindeki) dinamik verileri çekip gösterebilmesiyle ortaya çıkar. İşte bu noktada API ve JSON kavramları devreye girer.

---

1. API (Uygulama Programlama Arayüzü) Nedir?

API (Application Programming Interface), iki farklı yazılımın birbiriyle iletişim kurmasını sağlayan bir köprüdür.

Bunu bir restoran örneğiyle açıklayalım:

• Müşteri (Flutter Uygulaması): Menüden yemek seçer ve sipariş verir.

• Mutfak (Sunucu/Veritabanı): Yemeğin hazırlandığı yerdir.

• Garson (API): Müşterinin siparişini mutfağa ileten ve mutfaktan çıkan yemeği müşteriye getiren kişidir.

Flutter uygulamanız doğrudan veritabanına bağlanmak yerine, güvenli ve standart bir yol olan API'lara istek (Request) atar ve onlardan bir yanıt (Response) alır.

2. JSON (JavaScript Object Notation) Nedir?

API (Garson), mutfaktan gelen yemeği size belirli bir formatta sunmalıdır. Web dünyasında sistemler arası veri taşımanın en popüler, en hafif ve en okunaklı yolu JSON'dır.

Süslü parantezler {} nesneleri, köşeli parantezler [] ise listeleri (dizileri) temsil eder. Veriler her zaman "Anahtar": "Değer" (Key: Value) çiftleri şeklinde yazılır.

Örnek bir JSON verisi:

JSON:

{
  "id": 1,
  "isim": "Ali Yılmaz",
  "ders": "Bilgisayar Bilimi",
  "not_ortalamasi": 85.5,
  "aktif_mi": true
}

Bu yapının hem insanlar tarafından okunması kolaydır hem de Flutter (Dart dili) tarafından hızlıca çözümlenebilir (parse edilebilir).

3. Flutter'da API ve JSON Entegrasyonu (Adım Adım)

Bir API'dan veri çekip ekranda göstermek için genellikle 4 temel adım izleriz:

Adım 1: Gerekli Paketin Kurulumu

İnternet üzerinden HTTP istekleri (GET, POST, PUT, DELETE) yapabilmek için http paketini projemize dahil etmeliyiz. pubspec.yaml dosyanıza şu satırı ekleyin:

YAML:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

Adım 2: Model Sınıfının Oluşturulması

JSON verisini Dart dilinin anlayabileceği bir Nesneye (Object) dönüştürmemiz gerekir. Gelen veriyi karşılayacak bir model sınıfı yazarız.

Dart:

class Ogrenci {
  final int id;
  final String isim;
  final String ders;

  Ogrenci({required this.id, required this.isim, required this.ders});

  // JSON'dan Dart nesnesine dönüştürme fonksiyonu
  factory Ogrenci.fromJson(Map<String, dynamic> json) {
    return Ogrenci(
      id: json['id'],
      isim: json['isim'],
      ders: json['ders'],
    );
  }
}

Adım 3: API'dan Veriyi Çekmek (Servis Katmanı)

http paketini kullanarak sunucuya bir GET isteği atarız. Bu işlem internet hızına bağlı olarak zaman alacağı için Asenkron Programlama (Future, async, await) kullanmalıyız.

Dart:

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

Future<Ogrenci> ogrenciGetir() async {
  // Örnek bir API adresi
  final url = Uri.parse('https://ornekapi.com/ogrenciler/1'); 
  
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // İstek başarılıysa JSON'ı çözümle (decode) ve Modele aktar
    final jsonVerisi = jsonDecode(response.body);
    return Ogrenci.fromJson(jsonVerisi);
  } else {
    // Hata durumu
    throw Exception('Veri yüklenemedi: ${response.statusCode}');
  }
}

Adım 4: Veriyi Arayüzde (UI) Göstermek

Flutter'da asenkron olarak gelecek bir veriyi ekranda göstermenin en iyi yolu FutureBuilder widget'ını kullanmaktır. FutureBuilder, verinin bekleme (loading), hata (error) ve başarıyla gelme (data) durumlarını otomatik olarak yönetir.

Dart:

class OgrenciEkrani extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Öğrenci Bilgileri')),
      body: Center(
        child: FutureBuilder<Ogrenci>(
          future: ogrenciGetir(), // 3. adımdaki fonksiyonumuz
          builder: (context, snapshot) {
            // Veri yükleniyorsa dönen bir yükleniyor ikonu göster
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } 
            // Hata varsa hatayı yazdır
            else if (snapshot.hasError) {
              return Text('Hata: ${snapshot.error}');
            } 
            // Veri başarıyla geldiyse ekranda göster
            else if (snapshot.hasData) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Öğrenci Adı: ${snapshot.data!.isim}'),
                  Text('Ders: ${snapshot.data!.ders}'),
                ],
              );
            }
            // Beklenmeyen bir durum için boş alan
            return Text('Veri bulunamadı.');
          },
        ),
      ),
    );
  }
}

Özet

1. API, uygulamanızın internetteki diğer sistemlerle konuşmasını sağlar.

2. JSON, bu konuşmada kullanılan ortak ve evrensel dildir.

3. Flutter'da http paketi ile API'a istek atılır, dönen JSON jsonDecode ile çözümlenir ve Dart modellerine aktarılır.

4. FutureBuilder ile bu gecikmeli veri, arayüze sorunsuz bir şekilde yansıtılır.

---

---

Flutter'da JSON ve API Kullanımı (Kapsamlı Eğitim)

Mobil uygulamaların büyük çoğunluğu verilerini internetten alır. Örneğin:

• Haber uygulamaları → Haber API'si

• Hava durumu uygulamaları → Hava durumu API'si

• E-ticaret uygulamaları → Ürün API'si

Flutter uygulamalarında bu veriler genellikle JSON formatında API üzerinden alınır.

Bu makalede şunları öğreneceğiz:

1. API nedir?

2. JSON nedir?

3. Flutter’da HTTP isteği nasıl yapılır?

4. JSON verisi nasıl parse edilir?

5. Model sınıfı oluşturma

6. Flutter'da API'den veri çekme

7. ListView ile ekranda gösterme

8. Gerçek bir mini proje

---

1. API Nedir?

API (Application Programming Interface)
Uygulamaların birbirleriyle konuşmasını sağlayan bir sistemdir.

Bir mobil uygulama:

• sunucuya istek gönderir

• sunucu veri gönderir

Basit API akışı

Flutter Uygulaması
        │
        │ HTTP Request
        ▼
      API Sunucusu
        │
        │ JSON Response
        ▼
Flutter Uygulaması

Örneğin:

https://jsonplaceholder.typicode.com/posts

Bu API bize örnek blog verileri döndürür.

---

2. JSON Nedir?

JSON (JavaScript Object Notation)
Veri taşımak için kullanılan hafif bir veri formatıdır.

JSON Örneği

{
  "id": 1,
  "title": "Flutter öğreniyorum",
  "body": "API ve JSON konusunu çalışıyorum"
}

JSON Liste Örneği

[
  {
    "id": 1,
    "title": "Flutter öğreniyorum"
  },
  {
    "id": 2,
    "title": "Dart dili çok güzel"
  }
]

JSON:

• Anahtar (key)

• Değer (value)

mantığıyla çalışır.

---

3. Flutter'da HTTP Paketini Kullanmak

API ile iletişim için http paketi kullanılır.

pubspec.yaml

dependencies:
  http: ^0.13.6

Terminal:

flutter pub get

---

4. Flutter'da API'den Veri Çekme

Önce gerekli kütüphaneleri ekleyelim.

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

---

API isteği

Future<void> veriGetir() async {

  final response = await http.get(
    Uri.parse("https://jsonplaceholder.typicode.com/posts")
  );

  if(response.statusCode == 200){
    print(response.body);
  }
}

Açıklama

Kod	Açıklama
http.get	API'ye GET isteği gönderir
Uri.parse	URL formatına çevirir
response	sunucudan gelen cevap
statusCode	isteğin başarılı olup olmadığını gösterir

---

5. JSON Decode (Parse) İşlemi

API'den gelen veri String formatındadır.

Bunu JSON'a çevirmeliyiz.

var data = jsonDecode(response.body);

Örnek:

Future<void> veriGetir() async {

  final response = await http.get(
    Uri.parse("https://jsonplaceholder.typicode.com/posts")
  );

  if(response.statusCode == 200){

    var data = jsonDecode(response.body);

    print(data[0]["title"]);

  }
}

---

6. Model Class Oluşturma (Profesyonel Yöntem)

Büyük projelerde JSON doğrudan kullanılmaz.

Onun yerine Model sınıfı oluşturulur.

---

JSON

{
 "userId": 1,
 "id": 1,
 "title": "Flutter API",
 "body": "JSON öğreniyorum"
}

---

Model Class

class Post {

  int userId;
  int id;
  String title;
  String body;

  Post({
    required this.userId,
    required this.id,
    required this.title,
    required this.body
  });

  factory Post.fromJson(Map<String, dynamic> json){

    return Post(
      userId: json["userId"],
      id: json["id"],
      title: json["title"],
      body: json["body"]
    );
  }

}

Neden Model Kullanılır?

Avantajları:

• Kod okunabilir olur

• Hata kontrolü kolaylaşır

• Büyük projelerde yönetilebilir olur

---

7. JSON Listeyi Model Listesine Çevirmek

API çoğu zaman liste döndürür.

Future<List<Post>> veriGetir() async {

  final response = await http.get(
    Uri.parse("https://jsonplaceholder.typicode.com/posts")
  );

  if(response.statusCode == 200){

    List jsonData = jsonDecode(response.body);

    return jsonData.map((e) => Post.fromJson(e)).toList();

  }else{

    throw Exception("Veri alınamadı");

  }

}

---

8. Flutter'da ListView ile Gösterme

State değişkeni

List<Post> postlar = [];

---

initState

@override
void initState() {
  super.initState();
  veriGetir().then((data){
    setState(() {
      postlar = data;
    });
  });
}

---

ListView

body: ListView.builder(

  itemCount: postlar.length,

  itemBuilder: (context,index){

    return ListTile(

      title: Text(postlar[index].title),

      subtitle: Text(postlar[index].body),

    );

  },

),

---

9. Tam Flutter Örneği

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

class Post {

  int userId;
  int id;
  String title;
  String body;

  Post({
    required this.userId,
    required this.id,
    required this.title,
    required this.body
  });

  factory Post.fromJson(Map<String, dynamic> json){

    return Post(
      userId: json["userId"],
      id: json["id"],
      title: json["title"],
      body: json["body"]
    );

  }

}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<Post> postlar = [];

  Future<List<Post>> veriGetir() async {

    final response = await http.get(
      Uri.parse("https://jsonplaceholder.typicode.com/posts")
    );

    if(response.statusCode == 200){

      List jsonData = jsonDecode(response.body);

      return jsonData.map((e) => Post.fromJson(e)).toList();

    }else{

      throw Exception("Veri alınamadı");

    }

  }

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

    veriGetir().then((data){

      setState(() {
        postlar = data;
      });

    });

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text("Flutter API Örneği"),
      ),

      body: ListView.builder(

        itemCount: postlar.length,

        itemBuilder: (context,index){

          return ListTile(

            title: Text(postlar[index].title),

            subtitle: Text(postlar[index].body),

          );

        },

      ),

    );

  }

}

---

10. Flutter API Veri Akışı Diyagramı

        API Server
           │
           │ JSON
           ▼
      HTTP Request
           │
           ▼
     Flutter App
           │
           │ jsonDecode()
           ▼
       Model Class
           │
           ▼
        ListView
           │
           ▼
        UI

---

11. Flutter API Kullanırken Dikkat Edilmesi Gerekenler

1️⃣ Asenkron Programlama

async
await
Future

çok iyi bilinmelidir.

---

2️⃣ Hata Kontrolü

if(response.statusCode == 200)

---

3️⃣ Loading Gösterme

Gerçek uygulamalarda:

CircularProgressIndicator()

kullanılır.

---

4️⃣ Null Safety

required
?
!

kavramları anlaşılmalıdır.

---

12. Öğrenci Uygulama Ödevi

Bir Haber Uygulaması geliştirin.

API:

https://jsonplaceholder.typicode.com/posts

Uygulama özellikleri:

• API'den veri çekme

• Model sınıfı kullanma

• ListView gösterme

• Detay sayfası

• Refresh özelliği

---

13. Öğrenciler İçin Mini Proje

Flutter Blog Uygulaması

Sayfalar:

1️⃣ Ana sayfa → Post listesi
2️⃣ Detay sayfası → Post içeriği
3️⃣ Yenile butonu

Kullanılacak kavramlar:

• HTTP

• JSON

• Model

• ListView

• Navigator

---

Sonuç

Flutter'da API kullanımı şu adımlarla gerçekleşir:

1️⃣ HTTP isteği gönder
2️⃣ JSON veri al
3️⃣ jsonDecode ile parse et
4️⃣ Model sınıfına dönüştür
5️⃣ ListView ile göster

Bu yapı tüm profesyonel Flutter uygulamalarının temelidir.

---

Aşağıda Flutter + JSON + API kullanan proje özellikle Flutter’da API mantığını öğrenmek için kullanılan klasik bir uygulamadır.

Bu projede:

• API'den veri çekme

• JSON parse etme

• Model oluşturma

• Liste gösterme

• Detay sayfası

öğrenilecektir.

---

Flutter Mini Proje

📰 Blog API Uygulaması

Bu uygulama bir blog post listesi gösterir.

API:

https://jsonplaceholder.typicode.com/posts

---

Proje Yapısı

lib
 ┣ main.dart
 ┣ models
 ┃ ┗ post.dart
 ┣ services
 ┃ ┗ api_service.dart
 ┣ pages
 ┃ ┣ home_page.dart
 ┃ ┗ detail_page.dart

Bu yapı profesyonel Flutter mimarisine yakın bir yapıdır.

---

1️⃣ pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  http: ^0.13.6

Terminal:

flutter pub get

---

2️⃣ Model Class

📁 models/post.dart

class Post {

  int userId;
  int id;
  String title;
  String body;

  Post({
    required this.userId,
    required this.id,
    required this.title,
    required this.body
  });

  factory Post.fromJson(Map<String, dynamic> json) {

    return Post(
      userId: json["userId"],
      id: json["id"],
      title: json["title"],
      body: json["body"]
    );

  }

}

---

3️⃣ API Service

📁 services/api_service.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../models/post.dart';

class ApiService {

  Future<List<Post>> fetchPosts() async {

    final response = await http.get(
      Uri.parse("https://jsonplaceholder.typicode.com/posts")
    );

    if (response.statusCode == 200) {

      List jsonData = jsonDecode(response.body);

      return jsonData.map((e) => Post.fromJson(e)).toList();

    } else {

      throw Exception("API hatası");

    }

  }

}

---

4️⃣ Ana Sayfa

📁 pages/home_page.dart

import 'package:flutter/material.dart';
import '../services/api_service.dart';
import '../models/post.dart';
import 'detail_page.dart';

class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  List<Post> posts = [];

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

  void loadData() async {

    var data = await ApiService().fetchPosts();

    setState(() {
      posts = data;
    });

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text("Flutter Blog"),
      ),

      body: posts.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(

              itemCount: posts.length,

              itemBuilder: (context, index) {

                return ListTile(

                  title: Text(posts[index].title),

                  subtitle: Text(
                    posts[index].body,
                    maxLines: 2,
                  ),

                  onTap: () {

                    Navigator.push(

                      context,

                      MaterialPageRoute(

                        builder: (_) =>
                            DetailPage(post: posts[index]),

                      ),

                    );

                  },

                );

              },

            ),

    );

  }

}

---

5️⃣ Detay Sayfası

📁 pages/detail_page.dart

import 'package:flutter/material.dart';
import '../models/post.dart';

class DetailPage extends StatelessWidget {

  final Post post;

  DetailPage({required this.post});

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text("Post Detay"),
      ),

      body: Padding(

        padding: EdgeInsets.all(16),

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          children: [

            Text(
              post.title,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold
              ),
            ),

            SizedBox(height: 20),

            Text(
              post.body,
              style: TextStyle(fontSize: 16),
            ),

          ],

        ),

      ),

    );

  }

}

---

6️⃣ main.dart

import 'package:flutter/material.dart';
import 'pages/home_page.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: "Flutter API",

      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      home: HomePage(),

    );

  }

}

---

Uygulama Çalışma Akışı

API Server
     │
     │ HTTP GET
     ▼
ApiService
     │
     │ JSON Decode
     ▼
Model (Post)
     │
     ▼
HomePage
     │
     ▼
ListView
     │
     ▼
DetailPage

---

Uygulama Özellikleri

✔ API'den veri çekme
✔ JSON parse
✔ Model class
✔ ListView
✔ Navigator
✔ Detay sayfası

---

Öğrenci İçin Geliştirme Ödevleri

Bu projeyi geliştir:

1️⃣ Pull To Refresh

RefreshIndicator

---

2️⃣ Arama Özelliği

TextField + filtreleme

---

3️⃣ Favori Post Sistemi

local storage

---

4️⃣ GridView tasarım

---

Aşağıda Flutter + API kullanarak yapılabilecek 10 proje fikri . Bunlar özellikle mobil uygulama geliştirme dersi, performans ödevi veya portföy projesi için çok uygundur. Projeleri kolay → zor sırasına göre.

---

Flutter İçin 10 API Proje Fikri

---

1️⃣ Hava Durumu Uygulaması 🌦

Kullanıcı bulunduğu şehrin hava durumunu görür.

API

• OpenWeather API

Özellikler

• şehir arama

• sıcaklık

• nem

• rüzgar

• 5 günlük tahmin

Öğrenilecek Konular

• JSON parsing

• HTTP request

• TextField ile API sorgusu

---

2️⃣ Haber Uygulaması 📰

Kullanıcı güncel haberleri görür.

API

• News API

Özellikler

• kategori seçimi

• haber listesi

• haber detay

• haber görselleri

Flutter Konuları

• ListView

• Network Image

• Navigator

---

3️⃣ Döviz Kuru Uygulaması 💱

Anlık döviz kurları.

API

• ExchangeRate API

Özellikler

• USD

• EUR

• GBP

• TRY karşılığı

Ek özellik

• para çevirici

---

4️⃣ Film Uygulaması 🎬

Kullanıcı filmleri listeler.

API

• TMDB API

Özellikler

• popüler filmler

• film detay

• film posterleri

• oyuncu bilgileri

Flutter Konuları

• GridView

• Hero Animation

---

5️⃣ Tarif (Yemek) Uygulaması 🍲

Yemek tarifleri gösterir.

API

• TheMealDB API

Özellikler

• yemek kategorileri

• tarif listesi

• tarif detay

• yemek görselleri

---

6️⃣ Ramazan İmsakiye Uygulaması 🕌

Ramazan için imsakiye uygulaması.

API

• Namaz vakti API

Özellikler

• sahur vakti

• iftar vakti

• şehir seçimi

• günlük vakitler

---

7️⃣ GitHub Kullanıcı Arama Uygulaması 👨‍💻

GitHub kullanıcılarını arar.

API

• GitHub API

Özellikler

• kullanıcı arama

• repo listesi

• takipçi sayısı

• profil fotoğrafı

Flutter Konuları

• search

• network image

• async programming

---

---

9️⃣ Dua Paylaşım Uygulaması 📿

Kullanıcılar dua paylaşabilir.

Backend

• Django API

Özellikler

• dua listesi

• dua ekleme

• dua beğenme

• yorum

Flutter Konuları

• POST API

• form gönderme

• authentication

---

🔟 Öğrenci Not Takip Sistemi 🎓

Bir öğrenci sistemi.

Backend

• Django REST API

Özellikler

• öğrenci giriş

• ders listesi

• notlar

• ortalama

Öğrenilecek Konular

• REST API

• authentication

• CRUD işlemleri

---

Bonus: Çok Güçlü Bir Proje

Sağlıklı Yaşam Takip Uygulaması

( Senin daha önce bahsettiğin proje ile uyumlu )

Özellikler

• günlük su takibi

• adım sayısı

• kalori takibi

• egzersiz listesi

Backend

• Firebase veya Django API

---

Öğrenciler İçin En Faydalı 5 Proje

En çok öğretici olanlar:

1️⃣ Hava durumu
2️⃣ Haber uygulaması
3️⃣ Film uygulaması
4️⃣ GitHub kullanıcı arama
5️⃣ Kripto para takip

---