Home > OS >  How to implement JSON Response in Flutter carousel_slider 4.1.1
How to implement JSON Response in Flutter carousel_slider 4.1.1

Time:08-03

I have this API enter image description here

CodePudding user response:

You can create a model and map the retrieved data with the API to facilitate further manipulation of the information in the code

class Hotel {
  final int id;
  final String photo;
  final double price;

  Hotel({
    required this.id,
    required this.photo,
    required this.price,
  });

  factory Hotel.fromMap(Map<String, dynamic> map) {
    return Hotel(
      id: map['id'],
      photo: map['photo'],
      price: (map['price'] as num).toDouble(),
    );
  }
}

Now you can retrieve the list with a helper

import 'package:http/http.dart' as http;
import 'dart:convert';

class Helper {
  static Future<List<Hotel>> getListHotel() async {
    late List<Hotel> listHotels = [];
    var url = Uri.parse("https://questinternational.ph/api/get_hotelphotos");
    var response = await http.get(url);
    var hotelMap = json.decode(response.body);

    for (var item in hotelMap) {
      listHotels.add(Hotel.fromMap(item));
    }
    return listHotels;
  }
}

The view:

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  TestPage({Key? key}) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Slider demo')),
      body: FutureBuilder(
        future: Helper.getListHotel(),
        builder: ((context, AsyncSnapshot<List<Hotel>> snapshot) {
          var data = snapshot.data;

          if (data == null) {
            return Center(child: CircularProgressIndicator());
          }

          return CarouselSlider(
            options: CarouselOptions(),
            items: data
                .map((item) => Container(
                      child: Image.network(item.photo,
                          fit: BoxFit.cover, width: 1000),
                    ))
                .toList(),
          );
        }),
      ),
    );
  }
}

But don't forget that it's just a proposal, because there are several ways to do it.

  • Related