CV'me Gözat

Flutter GetX İle Local Json Okuma

Eylül 25, 2021

Flutter GetX İle Local Json Okuma

Merhaba,kıymetli okurlar bugünkü yazımızda sizlere GetX kullanarak local json dosyasından nasıl veri okuyup ekrana yazdırabiliriz bunu göstereceğiz. Uygulamamızda kullanacağımız local json dosyasına yazının en alt kısmından erişebilirsiniz. Hadi o zaman hemen işlemlerimize bir göz atalım.

Başlangıç aşaması

  1. Öncelikle yeni bir Flutter projesi oluşturun
  2. Pubspec.yaml dosyamıza Getx kütüphanesini ekliyoruz. Bilmeyenler için buraya tıklayarak detayları öğrenebilirsiniz.
  3. GetX paketini ekledikten sonra lib altında folder structure yani klasör yapımızı oluşturalım. Bunun için ben lib klasörü altında sırayla; Bindings,controllers,models,services ve views klasörlerini oluşturdum. Sizler farklı tercihlerde bulunabilirsiniz. Yemek tarifi gibi oldu biraz farkındayım 😀 Kısaca bu klasörleri tanıyalım istiyorum.
  • Binding klasörü uygulamamızın bağlayıcısı diyebiliriz. Uygulama açıldığında içindeki servisleri veya kontrol sınıflarını yüklüyor diyebiliriz.
  • Controller klasörü adı üzerinde kontrol sınıflarını barındırıyor. Peki neyi kontrol ediyoruz diye soracak olursanız state kavramını tabi ki 🙂 State kavramı da nedir diye sormaya başladıysanız buradan bilgi sahibi olabilirsiniz.
  • Model klasörümüzde json dosyamızın içindeki verileri dart dilinin anlayacağı hâle getirip barındırdığımız yapıdır desem yanlış olmaz sanırım.
  • Service klasörümüzde de api istekleri yapan arkadaşlarımız bilecektir, apilerle iletişime geçtiğimiz yapıları barındırır ancak biz apilerle değil local json dosyaları ile çalışacağız. Bu yüzden local json dosyasına istek atacağız diyebilirim. Bu istek elbette json dosyasını okuyup decode etme üzerine olacak.
  • Son olarak View klasörü kaldı. Bu klasörde de uygulamamızın sayfalarını barındıyor olacağız.

Klasör yapımıza ek olarak uygulama içerisinde assets adında bir klasör daha oluşturalım ve içerisine indirmiş olduğumuz json dosyasını ekleyelim.

      Pubspec.yaml dosyamızdan assets klasörü ile ilgili değişikleri yapmayı unutmayalım.

 

Evet,kabaca nasıl başlayacağımızı aktarmaya çalıştım. Eğer yanlış ya da eksik ifade ettiğim adımlar varsa lütfen düzeltmekten çekinmeyin.

Şimdi sırada Nasıl yapıyoruz kısmı var. Hemen oraya geçelim.

Nasıl Yapıyoruz?

  • Öncelikle services klasörünün altında bir dart dosyası oluşturalım. Burada local json dosyamızı okuyor ve decode ediyor olacağız.
  • Ben bir class oluşturup adına LocalJsonService adını verdim.
  • class LocalJsonService{}
  • Daha sonra Future ile asenkron bir metot oluşturuyorum
  • Henüz bir model oluşturmadığım için ModelAdi kısmını boş geçiyorum
  • Oluşturduğum getLocalJsonData metodu içerisinde sırasıyla aşağıdaki işlemleri gerçekleştiriyorum
  • import 'dart:convert';
    import 'package:flutter/services.dart' show rootBundle;
    
    class LocalJsonService{ 
    Future<List<ModelAdi>> getLocalStudent()async{
    //Json dosyasının path'ini söylüyoruz
    final _localPath = "assets/jsons/json_adi.json";
    
        // 1) Json Array yani Json Dizisini String olarak yüklüyorum
        final _response = await rootBundle.loadString(_localPath);
    
        /// 2) String olarak yükledikten sonra Liste haline getiriyorum
        final List _decoded = jsonDecode(_response);
    
        /// 3-A) Listemi iterable yapıyorum
        final _iterable = _decoded.map((e) => ModelAdi.fromJson(e));
    
        /// 3-B) Ve tekrar liste yapıyorum
        final _readEvents = List<ModelAdi>.from(_iterable);
    
        /// _readEvents'i döndür.
        return _readEvents;
    
    
    } 
    }
  • Servisimizi oluşturduktan sonra modelimizi oluşturmaya geçebiliriz. Aşağıda vermiş olduğum json kodlarını kopyalayın ve buraya tıklayın. Açılan sayfanın sol tarafına json kodlarını yapıştırdıktan sonra sağ tarafta çıkan seçeneklerden Make all properties final ögesini aktif hale getirin.
  • [
      {
        "ogrenci_adi": "Samet",
        "ogrenci_soyadi": "Kara",
        "ogrenci_tc": "03225672341",
        "ogrenci_telefon": "9996542573",
        "ogrenci_email": "karasamet@mail.com"
      }
          ]
  • Copy code deyip kodları model klasörü altında bir dosya yaratıp oraya yapıştırabilirsiniz. Çıktınız bu şekilde olmalı
  • // To parse this JSON data, do
    //
    //     final ogrenci = ogrenciFromJson(jsonString);
    
    import 'dart:convert';
    
    List<Ogrenci> ogrenciFromJson(String str) => List<Ogrenci>.from(json.decode(str).map((x) => Ogrenci.fromJson(x)));
    
    String ogrenciToJson(List<Ogrenci> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
    
    class Ogrenci {
        Ogrenci({
            this.ogrenciAdi,
            this.ogrenciSoyadi,
            this.ogrenciTc,
            this.ogrenciTelefon,
            this.ogrenciEmail,
        });
    
        final String ogrenciAdi;
        final String ogrenciSoyadi;
        final String ogrenciTc;
        final String ogrenciTelefon;
        final String ogrenciEmail;
    
        factory Ogrenci.fromJson(Map<String, dynamic> json) => Ogrenci(
            ogrenciAdi: json["ogrenci_adi"],
            ogrenciSoyadi: json["ogrenci_soyadi"],
            ogrenciTc: json["ogrenci_tc"],
            ogrenciTelefon: json["ogrenci_telefon"],
            ogrenciEmail: json["ogrenci_email"],
        );
    
        Map<String, dynamic> toJson() => {
            "ogrenci_adi": ogrenciAdi,
            "ogrenci_soyadi": ogrenciSoyadi,
            "ogrenci_tc": ogrenciTc,
            "ogrenci_telefon": ogrenciTelefon,
            "ogrenci_email": ogrenciEmail,
        };
    }
    
  • Burada import satırı ve altında yer alan iki satırı siliyoruz ve son şeklini vermiş oluyoruz. Unutmadan constructorda parametreler hata veriyorsa bunları nullable ya da required yapabilirsiniz.  Model sınıfının son haline aşağıdan erişebilirsiniz.
  • // To parse this JSON data, do
    //
    //     final ogrenci = ogrenciFromJson(jsonString);
    
    class Ogrenci {
      Ogrenci({
        this.ogrenciAdi,
        this.ogrenciSoyadi,
        this.ogrenciTc,
        this.ogrenciTelefon,
        this.ogrenciEmail,
      });
    
      final String? ogrenciAdi;
      final String? ogrenciSoyadi;
      final String? ogrenciTc;
      final String? ogrenciTelefon;
      final String? ogrenciEmail;
    
      factory Ogrenci.fromJson(Map<String, dynamic> json) => Ogrenci(
            ogrenciAdi: json["ogrenci_adi"],
            ogrenciSoyadi: json["ogrenci_soyadi"],
            ogrenciTc: json["ogrenci_tc"],
            ogrenciTelefon: json["ogrenci_telefon"],
            ogrenciEmail: json["ogrenci_email"],
          );
    
      Map<String, dynamic> toJson() => {
            "ogrenci_adi": ogrenciAdi,
            "ogrenci_soyadi": ogrenciSoyadi,
            "ogrenci_tc": ogrenciTc,
            "ogrenci_telefon": ogrenciTelefon,
            "ogrenci_email": ogrenciEmail,
          };
    }
    
  • Model sınıfımızı oluşturduktan sonra servis sınıfımızda gerekli yerlere import işlemini sağlayalım. Servis sınıfımızın son hali aşağıdaki gibidir.
  • import 'dart:convert';
    import 'package:flutter/services.dart' show rootBundle;
    import 'package:local_json_app/models/ogrenci_model.dart';
    
    class LocalJsonService {
      Future<List<Ogrenci>> getLocalStudent() async {
        final _localPath = "assets/jsons/ogrenci.json";
    
        // 1) JSON Array[] To String:
        final _response = await rootBundle.loadString(_localPath);
    
        /// 2) String To List<dynamic>:
        final List _decoded = jsonDecode(_response);
    
        /// 3-A) List<dynamic> To Iterable<Post>:
        final _iterable = _decoded.map((e) => Ogrenci.fromJson(e));
    
        /// 3-B) Iterable<Post> To List<Post>:
        final _readEvents = List<Ogrenci>.from(_iterable);
    
        /// _readPosts'u döndür.
        return _readEvents;
      }
    }
    
  • Sıra geldi controller dosyamızı oluşturmaya controller dosyamızı oluşturuken GetxControllerden extends ettiğime dikkat edin. Daha sonra constructor ile servis sınıfını yüklediğime ve servisi çağırdığıma da ayrıca dikkat etmeniz gerekmekte. Kabaca burada servisi çağırdıktan sonra getStudent adında bir metot oluşturup servisten bize local json dosyamızda bulunan ögeleri getir diyoruz. Bunu yaparken asenkron bir işlem olduğu için işlem bitene kadar loading işlemi yaptırıyoruz. Controller dosyamız aşağıdaki gibi olmalı
    import 'package:get/get.dart';
    import 'package:local_json_app/models/ogrenci_model.dart';
    import 'package:local_json_app/services/ogrenci_service.dart';
    
    class HomeController extends GetxController {
      /// Constructor
      HomeController() {
        _localJsontService = Get.find<LocalJsonService>();
        getStudent();
      }
    
      LocalJsonService? _localJsontService;
      late RxList<Ogrenci> students;
    
      RxBool isLoading = false.obs;
    
      Future<List<Ogrenci>> getStudent() async {
        showLoading();
        final _result = await _localJsontService!.getLocalStudent();
        hideLoading();
        students = _result.obs;
    
        return students;
      }
    
      void showLoading() => isLoading.toggle();
    
      void hideLoading() => isLoading.toggle();
    }
    
  • Artık son adımlara geliyoruz. Şimdi view yani ekranda verileri gösterme işlemine geçebiliriz. Stateless widget oluşturuyorum ve controllerimi çağırıyorum. Listview.builder kullanarak controllerden student listesinin uzunluğu kadar item oluşturmasını söylüyorum. Ve bu itemleri oluşturmak için kendisine ListTile widgetini veriyorum. ListTile widgetinin de title parametresine Text verip controllerden listenin ögelerinden birini çağırmasını istiyorum. Kabaca bu şekilde. Detaylara girmiyorum zira bu konuları araştıran biriyseniz bence bu konulara aşinasınızdır. Yinede anlamadığınız yerler olursa bana buradan veya sosyal medya üzerinden ulaşabilirsiniz View klasörü altında oluşturduğum dosyam bu şekildedir
  • import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    import 'package:local_json_app/controller/ogrenci_controller.dart';
    
    class JsonListView extends StatelessWidget {
      final _controller = Get.find<HomeController>();
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Center(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: _controller.students.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      _controller.students[index].ogrenciAdi.toString(),
                    ),
                  );
                }),
          ),
        );
      }
    }
    
  • Buraya kadar gelip uygulamayı çalıştırırsanız muhtemelen hata alacaksınızdır. Çünkü henüz uygulamaya initial route ve binding vermedik. Main dosyasını aşağıdaki gibi düzenledikten sonra uygulamayı çalıştırırsanız hata almadan sorunsuzca uygulamanız çalışacaktır. Bu işlem ile birlikte flutter getx ile local json dosyasından veri okuma işleminiz tamamlanmış demektir.
  • import 'package:flutter/material.dart';
    import 'package:get/get_navigation/get_navigation.dart';
    import 'package:local_json_app/bindings/home_binding.dart';
    import 'package:local_json_app/views/json_list_view.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          initialRoute: '/',
          getPages: [
            GetPage(
              name: '/',
              page: () => JsonListView(),
              binding: HomeBinding(),
            ),
          ],
        );
      }
    }
    

Evet bir yazının daha sonuna geldik. Umarım sizler için faydalı bir yazı olmuştur. Diğer yazılarıma erişmek için buraya tıklayabilirsiniz. Başka yazılarda görüşmek üzere 🙂

Posted in Blog, FlutterTags:
Write a comment