Flutter ve Dart üzerine notlar #3 İnternetten veri almak

İnternetten veri almak çoğu uygulama için gereklidir. Neyseki Dart ve Flutter bu tür bir iş için araçlar sağlar.

Talimatlar

1. http paketini ekle
2. http paketini kullanarak request gönder
3. Gelen yanıtı bir Dart nesnesine dönüştür
4. Flutter ile verileri al ve göster

1. http paketini ekle

http paketi internetten veri almak için en basit yolu sunar. 

http paketini kurmak için uygulama dizininde bulunan pubspec.yaml dosyasına eklemeliyiz. Güncel versiyonunu paketin pub sayfasında bulabilirsiniz.

https://pub.dartlang.org/packages/http#-installing-tab-

dependencies:
  http: <latest_version>

Şimdi aşağıdaki komutla paketleri çekelim.

flutter packages get

2. http paketini kullanarak request gönder

Bu örnekte, http.get() fonksiyonunu kullanarak JSONPlaceholder REST API'sinden bir örnek gönderi alacağız.

Future<http.Response> fetchPost() {
  return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

http.get() fonksiyonu Response objesini içeren bir Future geri döndürür. Future asenkron işlemlerde kullanılır. Javascript ile geliştirme yapıyorsanız çalışma mantığına Promise kullanımdan aşina olabilirsiniz.

https://www.dartlang.org/tutorials/language/futures

• Future asenkron işlemler ile çalışmak için kullanılan temel bir Dart sınıfıdır.
• Bir fonksiyon çalışmaya başladıktan sonra başarılı ya da başarısız durumda ne yapılacağını kontrol etmek için kullanılır.
• http.Response sınıfı başarılı bir http isteğinden alınan verileri içerir.

3. Gelen yanıtı bir Dart nesnesine dönüştür

Bir ağ isteği yapmak kolay olmakla birlikte, işlenmemiş bir Future<http.Response> ile çalışmak çok kolay değildir. İşimizi kolaylaştırmak için http.Response'ı kendi Dart nesnemize dönüştürebiliriz.

Bir Post sınıfı oluşturun

Öncelikle, ağ isteğimizin verilerini içeren bir Post sınıfı oluşturmamız gerekecek. Ayrıca, json'dan bir Post oluşturmamıza izin veren bir fabrika kurucusunu da içerecektir.

JSON'u elle dönüştürme yalnızca bir seçenektir. Daha fazla bilgi için, lütfen JSON ve serialization hakkındaki makalenin tamamına bakın.

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

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

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

http.Response sınıfını Post sınıfına dönüştürün

Şimdi, bir Future<Post> döndürmek için fetchPost işlevini güncelleyeceğiz. Bunu yapmak için yapmanız gerekenler:

1. dart:convert paketini kullanarak response.body verisini json Map haline dönüştürün.
2. Sunucu 200 durum koduyla bir "Tamam" yanıtı verirse, json Haritasını, fromJson fonksiyonunu kullanarak bir Post sınıfına dönüştürün.
3. Sunucu beklenmeyen bir yanıt verirse, bir hata gönderin.

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // If server returns an OK response, parse the JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // If that response was not OK, throw an error.
    throw Exception('Failed to load post');
  }
}

Şimdi internetten bir Post almak için çağırabileceğimiz bir fonksiyonumuz var!

4. Verileri almak ve göstermek

Verileri almak ve ekranda görüntülemek için FutureBuilder widget'ı kullanabiliriz. FutureBuilder flutter ile birlikte gelir ve asenkron veri kaynakları ile çalışabilmeyi mümkün kılar.

İki parametre ayarlamalıyız:

• future ile çalışmak istiyoruz. Bu durumda fetchPost() fonksiyonumuzu çağıracağız.
• builder yükleme, başarı veya hata durumuna bağlı olarak, Flutter'a ne yapması gerektiğini söyleyen bir işlevdir.

FutureBuilder<Post>(
  future: fetchPost(),
  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();
  },
);

4. fetch çağrısının build işlevinden çıkarılması

Her ne kadar uygun olsa bile, build() yönteminizde bir api'ye çağrı yapmanız önerilmez.

Flutter build(), görünümdeki herhangi bir şeyi değiştirmek istediği her seferinde yöntemi çağırır ve bu şaşırtıcı bir şekilde gerçekleşir. fetch çağrısını build() yönteminizde bırakırsanız, api'yi gereksiz aramalarla doldurur ve uygulamanızı yavaşlatırsınız.

İşte bazı daha iyi seçenekler, bu yüzden sadece sayfa ilk yüklendiğinde API'ye ulaşır.

Bir StatelessWidget'a aktarın

Bu stratejiyle, ana pencere aracı, fetch yöntemini çağırmak, sonucunu kaydetmek ve ardından pencere aracınıza aktarmaktan sorumludur.

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

Bu kodun çalışan bir örneğini sayfanın en altında bulunan örnekte görebilirsiniz.

Ya da bir StatefulWidget'e aktarın

StatefulWidget initState methodu widget oluşturulduğu sırada bir kez çağılır ve bir daha asla çağrılmaz.

class _MyAppState extends State<MyApp> {
  Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }

Tam Örnek

import 'dart:async';
import 'dart:convert';

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

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // If the call to the server was successful, parse the JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // If that call was not successful, throw an error.
    throw Exception('Failed to load post');
  }
}

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

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

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

void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            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();
            },
          ),
        ),
      ),
    );
  }
}

Kaynak: https://flutter.io/docs/cookbook/networking/fetch-data