Home Mobile Flutter Swiper – with REST API

Flutter Swiper – with REST API

0

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.

  1. 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 🙂