Flutter’da Uzak Sunucudan Kolayca Veri Çekme ve Listeleme

Flutter ile bir projede dış kaynaktan (örneğin bir JSON API ya da GitHub’daki bir dosya) veri çekmek ve bunu uygulamada göstermek oldukça basit ve güçlü bir işlemdir. Bu yazıda, Flutter’da http paketini kullanarak uzak sunucudan veri nasıl alınır, nasıl modellenir ve kullanıcıya nasıl gösterilir, bunu adım adım anlatacağım.

Tam Kod — main.dart

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

// MAIN APP
void main() {
  runApp(MaterialApp(
    title: 'Çalışma Saatleri',
    theme: ThemeData(primarySwatch: Colors.teal),
    home: WorkingHourScreen(),
  ));
}
// SCREEN
class WorkingHourScreen extends StatefulWidget {
  @override
  _WorkingHourScreenState createState() => _WorkingHourScreenState();
}

class _WorkingHourScreenState extends State<WorkingHourScreen> {
  final WorkingHourService _service = WorkingHourService();
  late Future<List<WorkingHour>> _future;

  @override
  void initState() {
    super.initState();
    _future = fetchWorkingHours();
  }

  Future<List<WorkingHour>> fetchWorkingHours() async {
    Result? result = await _service.getWorkingHours();
    if (result != null && result.success && result.data != null) {
      return result.data.cast<WorkingHour>();
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Çalışma Saatleri")),
      body: FutureBuilder<List<WorkingHour>>(
        future: _future,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text("Hata: ${snapshot.error}"));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text("Veri bulunamadı."));
          } else {
            final hours = snapshot.data!;
            return ListView.builder(
              itemCount: hours.length,
              itemBuilder: (context, index) {
                final item = hours[index];
                return Card(
                  margin: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  child: ListTile(
                    title: Text("${item.day?.toLocal().toString().split(' ')[0]}"),
                    subtitle: Text("Başlangıç: ${item.startTime} - Bitiş: ${item.endTime}"),
                    leading: Icon(Icons.access_time),
                  ),
                );
              },
            );
          }
        },
      ),
    );
  }
}

// MODEL
class WorkingHour {
  int? id;
  DateTime? day;
  String? startTime;
  String? endTime;
  DateTime? createdAt;
  DateTime? updatedAt;

  WorkingHour({
    this.id,
    this.day,
    this.startTime,
    this.endTime,
    this.createdAt,
    this.updatedAt,
  });

  factory WorkingHour.fromJson(Map<String, dynamic> json) {
    return WorkingHour(
      id: json['id'],
      day: json['day'] != null ? DateTime.tryParse(json['day']) : null,
      startTime: json['start_time'],
      endTime: json['end_time'],
      createdAt:
      json['created_at'] != null ? DateTime.tryParse(json['created_at']) : null,
      updatedAt:
      json['updated_at'] != null ? DateTime.tryParse(json['updated_at']) : null,
    );
  }
}

// RESULT WRAPPER
class Result {
  bool success;
  String? message;
  dynamic data;

  Result({required this.success, this.message, this.data});

  factory Result.fromJson(Map<String, dynamic> json) {
    return Result(
      success: json['success'] ?? false,
      message: json['message'],
      data: json['data'],
    );
  }
}

// SERVICE
class WorkingHourService {
  final String url = "https://raw.githubusercontent.com/AhmetAkinYazilim/ExzamleDatabase/refs/heads/main/working_hours.json"; // <- kendi JSON URL'inle değiştir
  Future<Result?> getWorkingHours() async {
    try {
      final response = await http.get(Uri.parse(url));
      final data = json.decode(response.body);
      final result = Result.fromJson(data);

      if (response.statusCode >= 200 && response.statusCode < 300) {
        final hours = (result.data as List)
            .map((e) => WorkingHour.fromJson(e))
            .toList();

        return Result(success: true, message: result.message, data: hours);
      } else {
        return Result(success: false, message: result.message);
      }
    } catch (e) {
      return Result(success: false, message: e.toString());
    }
  }
}

1. Gerekli Paketi Kurmak

Veri çekme işlemleri için en sık kullanılan paketlerden biri http paketidir. Bu paketi projenize dahil etmek için pubspec.yaml dosyasına aşağıdaki satırı eklemeniz yeterli:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6

Daha sonra terminalde şu komutu çalıştırarak paketi yükleyin:

flutter pub get

2. Proje Yapısı ve Kullanım Senaryosu

Örnek senaryomuzda, GitHub’da barındırılan bir JSON dosyasından çalışma saatlerini alacağız. Her gün için başlangıç ve bitiş saatleri liste halinde kullanıcıya gösterilecek.

3. Uygulama Ekranı

Ana ekran, veriyi çektikten sonra bir liste olarak gösteriyor. Veri yüklenirken bir Progress Indicator, hata oluşursa hata mesajı, veri yoksa “Veri bulunamadı” mesajı gösteriliyor:

body: FutureBuilder<List<WorkingHour>>(
  future: _future,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return Center(child: Text("Hata: ${snapshot.error}"));
    } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
      return Center(child: Text("Veri bulunamadı."));
    } else {
      final hours = snapshot.data!;
      return ListView.builder(
        itemCount: hours.length,
        itemBuilder: (context, index) {
          final item = hours[index];
          return Card(
            child: ListTile(
              title: Text("${item.day?.toLocal().toString().split(' ')[0]}"),
              subtitle: Text("Başlangıç: ${item.startTime} - Bitiş: ${item.endTime}"),
              leading: Icon(Icons.access_time),
            ),
          );
        },
      );
    }
  },
),

4. Veri Modelleme (Model Sınıfı)

Sunucudan gelen JSON verilerini Dart nesnesine çevirmek için model sınıflarımızı tanımlıyoruz. Örneğimizde WorkingHour ve Result adında iki model kullandık.

class WorkingHour {
  int? id;
  DateTime? day;
  String? startTime;
  String? endTime;
  ...
}

Result sınıfı ise API cevabının başarılı mı değil mi olduğunu, mesaj içeriğini ve veriyi temsil eder.

class Result {
  bool success;
  String? message;
  dynamic data;
  ...
}

5. Servis Katmanı: HTTP ile Veri Çekmek

Veriyi çeken servis sınıfı şöyle çalışır:

class WorkingHourService {
  final String url = "https://.../working_hours.json";
   Future<Result?> getWorkingHours() async {
    try {
      final response = await http.get(Uri.parse(url));
      final data = json.decode(response.body);
      ...
    } catch (e) {
      return Result(success: false, message: e.toString());
    }
  }
}

Burada http.get ile JSON verisi çekilir, json.decode ile Dart map’ine dönüştürülür ve model sınıflarımıza çevrilerek ekrana aktarılır.

6. Tam Kod

Uygulamanın tam kaynak kodunu GitHub sayfamda paylaştım. Dilersen projeni kolayca oradan başlatabilirsin.

Sonuç

Bu yazıda, Flutter’da uzak bir kaynaktan veri çekmenin temel adımlarını öğrendik:

http paketi kurulumu
JSON verisinin Dart modellerine çevrilmesi
FutureBuilder ile asenkron veri gösterimi

Bu yapıyı kullanarak API tabanlı projelerin temellerini kolayca oluşturabilir, gerçek zamanlı veri gösterimleri geliştirebilirsin.

İstersen bu yazıyı bir blog sitesine uygun şekilde HTML formatına da çevirebilirim ya da örnek proje yapısı dosya hiyerarşisiyle birlikte gösterebilirim. Devam edelim mi?