Kali ini kita akan mempelajari konsep tipe data Future di flutter, setahu saya tipe data ini belum ada di PHP dan javascript, karena itu kita akan sedikit mempelajarinya
Part 1 : Menggunakan Variabel data local
main.dart :
import 'package:flutter/material.dart';
import 'Halaman/page1.dart';
import 'Halaman/page2.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => Page2(),
'/page1': (context) => Page1(),
'/page2': (context) => Page2(),
},
);
}
}
page2.dart :
//import 'dart:async';
import 'package:flutter/material.dart';
class Page2 extends StatefulWidget {
@override
_FutureExampleState createState() => _FutureExampleState();
}
class _FutureExampleState extends State<Page2> {
String _nama = "kosong";
Future<String> fetchData(String nama) async {
print("fetchData mulai");
await Future.delayed(Duration(seconds: 2));
print("fetchData selesai");
print(nama);
//return 'Ini adalah : '+nama;
setState(() {
_nama = nama; // Memperbarui variabel dan membangun ulang UI
});
return "ini retrun";
}
/*
void fetchData(nama){
setState(() {
_nama = nama; // Memperbarui variabel dan membangun ulang UI
});
}
*/
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Future Example'),
),
body: Column(
children: [
/*
FutureBuilder<String>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // Menampilkan loading indicator ketika data sedang diambil
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
// Menampilkan data ketika berhasil diambil
return Text(snapshot.data!);
}
},
),
*/
Text(_nama),
ElevatedButton(
onPressed : () {
print("ditekan");
fetchData("iniNama");
} ,
child: Text("hello")
),
],
),
);
}
}
Untuk hasilnya seperti berikut :
Part 2 : Menggunakan Variabel data API
page2.dart :
//import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class Item {
final String id;
final String name;
final String description;
Item({
required this.id,
required this.name,
required this.description,
});
factory Item.fromJson(Map<String, dynamic> json) {
return Item(
id: json['id'],
name: json['name'],
description: json['description'],
);
}
}
class Page2 extends StatefulWidget {
@override
_FutureExampleState createState() => _FutureExampleState();
}
class _FutureExampleState extends State<Page2> {
String _nama = "kosong";
Future<String> fetchData(String nama) async {
print("fetchData mulai");
await Future.delayed(Duration(seconds: 2));
print("fetchData selesai");
print(nama);
setState(() {
_nama = nama; // Memperbarui variabel dan membangun ulang UI
});
return "ini retrun";
}
Future<List<Item>> fetchItems() async {
final response = await http.get(Uri.parse('http://192.168.43.227/contohAPI/getdata.php'));
if (response.statusCode == 200) {
print("hasil api");
print(response.statusCode );
print(response.body);
Iterable data = json.decode(response.body);
print(data);
print(data.elementAt(0));
print(data.elementAt(0)['name']);
setState(() {
_nama = data.elementAt(0)['name']; // Memperbarui variabel dan membangun ulang UI
});
return data.map((json) => Item.fromJson(json)).toList();
} else {
throw Exception('Failed to load items');
}
}
@override
void initState() {
super.initState();
//fetchData("Nama Baru"); // Memanggil fetchData saat halaman diload
//fetchItems();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Future Example'),
),
body: Column(
children: [
/*
FutureBuilder<String>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // Menampilkan loading indicator ketika data sedang diambil
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
// Menampilkan data ketika berhasil diambil
return Text(snapshot.data!);
}
},
),
*/
Text(_nama),
Text("conoth nama"),
ElevatedButton(
onPressed : () {
print("ditekan");
fetchData("Nama lama");
} ,
child: Text("Get Data Local")
),
ElevatedButton(
onPressed : () {
print("ditekan");
fetchItems();
} ,
child: Text("Get Data API")
),
],
),
);
}
}
