Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang “Use Swiper with REST API”.
Swiper merupakan salah satu package yang digunakan pada Flutter. Namun pada kali ini kita akan mengimplementasikan API image menggunakan widget Swiper.
- Tambahkan library pada pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
flutter_swiper: ^1.1.6
shared_preferences: ^2.0.6
Library swiper berfungsi untuk menjalankan swiper di Flutter
Library shared preferences berfungsi untuk menyimpan token serta data dari API
2. Tambah code berikut ketika dari login menuju laman Home.
Future saveSession(Map data) async {
SharedPreferences pref = await SharedPreferences.getInstance();
await pref.setString('accesToken', data['data']['token']);
}
3. Buat file baru dengan nama slider_provider.dart
import 'dart:convert';
import 'dart:developer';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
class SliderProvider extends ChangeNotifier {
List listSlider = [];
var itemSlider;
bool isLoading = true;
SliderProvider(context) {
getListSlider(context);
}
Future<void> getListSlider(context) async {
isLoading = true;
notifyListeners();
SharedPreferences pref = await SharedPreferences.getInstance();
String? token = pref.getString('accesToken');
http.Response res = await http.get(
Uri.parse('Isi disini API yang ingin ditampilkan'), // Link API
headers: {'Authorization': 'Bearer ${token}'});
isLoading = true;
notifyListeners();
if (res.statusCode == 200) {
Map data = jsonDecode(res.body);
print(res.body);
if (data['isSuccess'] == true) {
var dataSlider = jsonDecode(res.body);
listSlider = dataSlider['data'];
}
} else {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Slider error')));
}
}
}
4. Kemudian tambahkan provide pada file baru
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => SliderProvider(context),
),
],
),
},
5. Tambahkan Widget Swiper
Container(
height: 180,
child: Swiper(
autoplay: true,
itemCount: sliderprovider.listSlider.length,
itemBuilder: (context, index) {
var slider = sliderprovider.listSlider[index];
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
'Isi link API disini${slider["image"]}'),
);
},
viewportFraction: 0.8,
scale: 0.9,
pagination: SwiperPagination(),
)
);
6. Wrap Container dan tambahkan Consumer.
Consumer<SliderProvider>(
builder: (context, sliderprovider, _) {
return Container(
height: 180,
child: Swiper(
autoplay: true,
itemCount: sliderprovider.listSlider.length,
itemBuilder: (context, index) {
var slider = sliderprovider.listSlider[index];
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
'Isi link API disini${slider["image"]}'), //sesuaikan pemanggilan dengan API masing-masing
);
},
viewportFraction: 0.8,
scale: 0.9,
pagination: SwiperPagination(),
)
);
},
),
Berikut adalah hasil Swiper menggunakan API
Catatan : Disini saya menghapus link API tetapi pemanggilannya sudah benar dilakukan seperti itu ya teman-teman.
Semoga membantu ya sobat Flutter 🙂