{"id":219,"date":"2025-05-09T13:54:00","date_gmt":"2025-05-09T13:54:00","guid":{"rendered":"https:\/\/www.webmobkey.com\/blog\/?p=219"},"modified":"2025-11-16T10:21:50","modified_gmt":"2025-11-16T10:21:50","slug":"flutterda-uzak-sunucudan-kolayca-veri-cekme-ve-listeleme","status":"publish","type":"post","link":"https:\/\/www.webmobdesign.com\/blog\/tr\/flutterda-uzak-sunucudan-kolayca-veri-cekme-ve-listeleme\/","title":{"rendered":"Flutter\u2019da Uzak Sunucudan Kolayca Veri \u00c7ekme ve Listeleme"},"content":{"rendered":"\n

Flutter ile bir projede d\u0131\u015f kaynaktan (\u00f6rne\u011fin bir JSON API ya da GitHub\u2019daki bir dosya) veri \u00e7ekmek ve bunu uygulamada g\u00f6stermek olduk\u00e7a basit ve g\u00fc\u00e7l\u00fc bir i\u015flemdir. Bu yaz\u0131da, Flutter\u2019da http<\/code> paketini kullanarak uzak sunucudan veri nas\u0131l al\u0131n\u0131r, nas\u0131l modellenir ve kullan\u0131c\u0131ya nas\u0131l g\u00f6sterilir, bunu ad\u0131m ad\u0131m anlataca\u011f\u0131m.<\/p>\n\n\n\n

Tam Kod \u2014 main.dart<\/strong><\/h4>\n\n\n
\nimport 'dart:convert';\nimport 'package:flutter\/material.dart';\nimport 'package:http\/http.dart' as http;\n\n\/\/ MAIN APP\nvoid main() {\n  runApp(MaterialApp(\n    title: '\u00c7al\u0131\u015fma Saatleri',\n    theme: ThemeData(primarySwatch: Colors.teal),\n    home: WorkingHourScreen(),\n  ));\n}\n\/\/ SCREEN\nclass WorkingHourScreen extends StatefulWidget {\n  @override\n  _WorkingHourScreenState createState() => _WorkingHourScreenState();\n}\n\nclass _WorkingHourScreenState extends State<WorkingHourScreen> {\n  final WorkingHourService _service = WorkingHourService();\n  late Future<List<WorkingHour>> _future;\n\n  @override\n  void initState() {\n    super.initState();\n    _future = fetchWorkingHours();\n  }\n\n  Future<List<WorkingHour>> fetchWorkingHours() async {\n    Result? result = await _service.getWorkingHours();\n    if (result != null && result.success && result.data != null) {\n      return result.data.cast<WorkingHour>();\n    } else {\n      return [];\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: Text("\u00c7al\u0131\u015fma Saatleri")),\n      body: FutureBuilder<List<WorkingHour>>(\n        future: _future,\n        builder: (context, snapshot) {\n          if (snapshot.connectionState == ConnectionState.waiting) {\n            return Center(child: CircularProgressIndicator());\n          } else if (snapshot.hasError) {\n            return Center(child: Text("Hata: ${snapshot.error}"));\n          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {\n            return Center(child: Text("Veri bulunamad\u0131."));\n          } else {\n            final hours = snapshot.data!;\n            return ListView.builder(\n              itemCount: hours.length,\n              itemBuilder: (context, index) {\n                final item = hours[index];\n                return Card(\n                  margin: EdgeInsets.symmetric(horizontal: 12, vertical: 6),\n                  child: ListTile(\n                    title: Text("${item.day?.toLocal().toString().split(' ')[0]}"),\n                    subtitle: Text("Ba\u015flang\u0131\u00e7: ${item.startTime} - Biti\u015f: ${item.endTime}"),\n                    leading: Icon(Icons.access_time),\n                  ),\n                );\n              },\n            );\n          }\n        },\n      ),\n    );\n  }\n}\n\n\/\/ MODEL\nclass WorkingHour {\n  int? id;\n  DateTime? day;\n  String? startTime;\n  String? endTime;\n  DateTime? createdAt;\n  DateTime? updatedAt;\n\n  WorkingHour({\n    this.id,\n    this.day,\n    this.startTime,\n    this.endTime,\n    this.createdAt,\n    this.updatedAt,\n  });\n\n  factory WorkingHour.fromJson(Map<String, dynamic> json) {\n    return WorkingHour(\n      id: json['id'],\n      day: json['day'] != null ? DateTime.tryParse(json['day']) : null,\n      startTime: json['start_time'],\n      endTime: json['end_time'],\n      createdAt:\n      json['created_at'] != null ? DateTime.tryParse(json['created_at']) : null,\n      updatedAt:\n      json['updated_at'] != null ? DateTime.tryParse(json['updated_at']) : null,\n    );\n  }\n}\n\n\/\/ RESULT WRAPPER\nclass Result {\n  bool success;\n  String? message;\n  dynamic data;\n\n  Result({required this.success, this.message, this.data});\n\n  factory Result.fromJson(Map<String, dynamic> json) {\n    return Result(\n      success: json['success'] ?? false,\n      message: json['message'],\n      data: json['data'],\n    );\n  }\n}\n\n\/\/ SERVICE\nclass WorkingHourService {\n  final String url = "https:\/\/raw.githubusercontent.com\/AhmetAkinYazilim\/ExzamleDatabase\/refs\/heads\/main\/working_hours.json"; \/\/ <- kendi JSON URL'inle de\u011fi\u015ftir\n  Future<Result?> getWorkingHours() async {\n    try {\n      final response = await http.get(Uri.parse(url));\n      final data = json.decode(response.body);\n      final result = Result.fromJson(data);\n\n      if (response.statusCode >= 200 && response.statusCode < 300) {\n        final hours = (result.data as List)\n            .map((e) => WorkingHour.fromJson(e))\n            .toList();\n\n        return Result(success: true, message: result.message, data: hours);\n      } else {\n        return Result(success: false, message: result.message);\n      }\n    } catch (e) {\n      return Result(success: false, message: e.toString());\n    }\n  }\n}\n<\/pre><\/div>\n\n\n
1. Gerekli Paketi Kurmak<\/h3>\n\n\n\n
Veri \u00e7ekme i\u015flemleri i\u00e7in en s\u0131k kullan\u0131lan paketlerden biri http<\/code> paketidir. Bu paketi projenize dahil etmek i\u00e7in pubspec.yaml<\/code> dosyas\u0131na a\u015fa\u011f\u0131daki sat\u0131r\u0131 eklemeniz yeterli:<\/p>\n\n\n
\ndependencies:\n  flutter:\n    sdk: flutter\n  http: ^0.13.6\n<\/pre><\/div>\n\n\n
Daha sonra terminalde \u015fu komutu \u00e7al\u0131\u015ft\u0131rarak paketi y\u00fckleyin:<\/p>\n\n\n
\nflutter pub get\n<\/pre><\/div>\n\n\n
2. Proje Yap\u0131s\u0131 ve Kullan\u0131m Senaryosu<\/h3>\n\n\n\n
\u00d6rnek senaryomuzda, GitHub\u2019da bar\u0131nd\u0131r\u0131lan bir JSON dosyas\u0131ndan \u00e7al\u0131\u015fma saatlerini alaca\u011f\u0131z. Her g\u00fcn i\u00e7in ba\u015flang\u0131\u00e7 ve biti\u015f saatleri liste halinde kullan\u0131c\u0131ya g\u00f6sterilecek.<\/p>\n\n\n\n
3. Uygulama Ekran\u0131<\/h4>\n\n\n\n
Ana ekran, veriyi \u00e7ektikten sonra bir liste olarak g\u00f6steriyor. Veri y\u00fcklenirken bir Progress Indicator<\/code>, hata olu\u015fursa hata mesaj\u0131, veri yoksa \u201cVeri bulunamad\u0131\u201d mesaj\u0131 g\u00f6steriliyor:<\/p>\n\n\n
\nbody: FutureBuilder<List<WorkingHour>>(\n  future: _future,\n  builder: (context, snapshot) {\n    if (snapshot.connectionState == ConnectionState.waiting) {\n      return Center(child: CircularProgressIndicator());\n    } else if (snapshot.hasError) {\n      return Center(child: Text("Hata: ${snapshot.error}"));\n    } else if (!snapshot.hasData || snapshot.data!.isEmpty) {\n      return Center(child: Text("Veri bulunamad\u0131."));\n    } else {\n      final hours = snapshot.data!;\n      return ListView.builder(\n        itemCount: hours.length,\n        itemBuilder: (context, index) {\n          final item = hours[index];\n          return Card(\n            child: ListTile(\n              title: Text("${item.day?.toLocal().toString().split(' ')[0]}"),\n              subtitle: Text("Ba\u015flang\u0131\u00e7: ${item.startTime} - Biti\u015f: ${item.endTime}"),\n              leading: Icon(Icons.access_time),\n            ),\n          );\n        },\n      );\n    }\n  },\n),\n<\/pre><\/div>\n\n\n
4. Veri Modelleme (Model S\u0131n\u0131f\u0131)<\/h4>\n\n\n\n
Sunucudan gelen JSON verilerini Dart nesnesine \u00e7evirmek i\u00e7in model s\u0131n\u0131flar\u0131m\u0131z\u0131 tan\u0131ml\u0131yoruz. \u00d6rne\u011fimizde WorkingHour<\/code> ve Result<\/code> ad\u0131nda iki model kulland\u0131k.<\/p>\n\n\n
\nclass WorkingHour {\n  int? id;\n  DateTime? day;\n  String? startTime;\n  String? endTime;\n  ...\n}\n<\/pre><\/div>\n\n\n
Result<\/code>\u00a0s\u0131n\u0131f\u0131 ise API cevab\u0131n\u0131n ba\u015far\u0131l\u0131 m\u0131 de\u011fil mi oldu\u011funu, mesaj i\u00e7eri\u011fini ve veriyi temsil eder.<\/p>\n\n\n
\nclass Result {\n  bool success;\n  String? message;\n  dynamic data;\n  ...\n}\n<\/pre><\/div>\n\n\n
5. Servis Katman\u0131: HTTP ile Veri \u00c7ekmek<\/h4>\n\n\n\n
Veriyi \u00e7eken servis s\u0131n\u0131f\u0131 \u015f\u00f6yle \u00e7al\u0131\u015f\u0131r:<\/p>\n\n\n
\nclass WorkingHourService {\n  final String url = "https:\/\/...\/working_hours.json";\n   Future<Result?> getWorkingHours() async {\n    try {\n      final response = await http.get(Uri.parse(url));\n      final data = json.decode(response.body);\n      ...\n    } catch (e) {\n      return Result(success: false, message: e.toString());\n    }\n  }\n}\n<\/pre><\/div>\n\n\n
Burada http.get<\/code> ile JSON verisi \u00e7ekilir, json.decode<\/code> ile Dart map\u2019ine d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr ve model s\u0131n\u0131flar\u0131m\u0131za \u00e7evrilerek ekrana aktar\u0131l\u0131r.<\/p>\n\n\n\n
6. Tam Kod<\/h4>\n\n\n\n
Uygulaman\u0131n tam kaynak kodunu GitHub sayfamda<\/a> payla\u015ft\u0131m. Dilersen projeni kolayca oradan ba\u015flatabilirsin.<\/p>\n\n\n\n
Sonu\u00e7<\/h4>\n\n\n\n
Bu yaz\u0131da, Flutter\u2019da uzak bir kaynaktan veri \u00e7ekmenin temel ad\u0131mlar\u0131n\u0131 \u00f6\u011frendik:<\/p>\n\n\n\n