İ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
- http paketini ekle
- http paketini kullanarak request gönder
- Gelen yanıtı bir Dart nesnesine dönüştür
- 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.
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');
}
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:
- dart:convert paketini kullanarak response.body verisini json Map haline dönüştürün.
- 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.
- 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
Hiç yorum yok:
Yorum Gönder