Flutter :- Issues in model i've accessed img_path but not able to access image because want to concatenate (img_path+image) to display in home page?

Question

I want to fetch images from API. I've created a model class but the problem is I have accessed the img_path from the model class but am not able to access the image from the model class because I want to concatenate img_path+image to display on the home page. Below I've mentioned the model class and home page code. please find and check the below classes.

Home Page :-

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'NavDrawer.dart';
import 'package:carousel_slider/carousel_slider.dart';

import 'banner_model.dart';

var paddingBottom = 48.0;
var androidDeviceInfo;
var identifier;
var token = "debendra";
var token1;

class HomePage extends StatelessWidget {
  final String apiUrl1 = "https://newbharatbiz.in/mobile_api/v4/all_banner.php";

  Future<BannerModel> fetchAlbum() async {
    final response = await http.get(Uri.parse(apiUrl1));

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return BannerModel.fromJson(jsonDecode(response.body));
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load album');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: NavDrawer(),
        appBar:
            AppBar(title: Text('New Bharat Biz'), centerTitle: true, actions: [
          IconButton(
            onPressed: () async {},
            icon: Icon(Icons.search),
          ),
        ]),
        body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          FutureBuilder<BannerModel>(
            future: fetchAlbum(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final List<String> imagesList = [
                  snapshot.data!.imgPath + "1542696267.png"
                ];
                return Container(
                  child: CarouselSlider(
                    options: CarouselOptions(
                      height: 330,
                      aspectRatio: 16 / 9,
                      viewportFraction: 0.8,
                      initialPage: 0,
                      enableInfiniteScroll: true,
                      reverse: false,
                      autoPlay: true,
                      autoPlayInterval: Duration(seconds: 3),
                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                      autoPlayCurve: Curves.fastOutSlowIn,
                      enlargeCenterPage: true,
                    ),
                    items: imagesList
                        .map(
                          (item) => Container(
                            child: Center(
                                child: Image.network(item,
                                    fit: BoxFit.cover, width: 1000)),
                          ),
                        )
                        .toList(),
                  ),
                );
              }
              // By default, show a loading spinner.
              return Center(
                child: SizedBox(
                  width: 16,
                  height: 16,
                  child: CircularProgressIndicator(
                    strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation(Colors.blue),
                  ),
                ),
              );
            },
          )
        ]));
  }
}

Model Class :

// To parse this JSON data, do
//
//     final bannerModel = bannerModelFromJson(jsonString);

import 'dart:convert';

BannerModel bannerModelFromJson(String str) => BannerModel.fromJson(json.decode(str));

String bannerModelToJson(BannerModel data) => json.encode(data.toJson());

class BannerModel {
  BannerModel({
    required this.status,
    required this.imgPath,
    required this.banner,
  });

  int status;
  String imgPath;
  List<Banner> banner;

  factory BannerModel.fromJson(Map<String, dynamic> json) => BannerModel(
    status: json["status"],
    imgPath: json["img_path"],
    banner: List<Banner>.from(json["Banner"].map((x) => Banner.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "status": status,
    "img_path": imgPath,
    "Banner": List<dynamic>.from(banner.map((x) => x.toJson())),
  };
}
 class Banner {
  Banner({
    required this.id,
    required this.type,
    required this.parentId,
    required this.title,
    required this.caption,
    required this.image,
    required this.link,
    required this.status,
    required this.sliderOrder,
    required this.entryTime,
  });

  String id;
  String type;
  String parentId;
  String title;
  String caption;
  String image;
  String link;
  String status;
  String sliderOrder;
  DateTime entryTime;

  factory Banner.fromJson(Map<String, dynamic> json) => Banner(
    id: json["id"],
    type: json["type"],
    parentId: json["parent_id"],
    title: json["title"],
    caption: json["caption"],
    image: json["image"],
    link: json["link"],
    status: json["status"],
    sliderOrder: json["slider_order"],
    entryTime: DateTime.parse(json["entry_time"]),
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "type": type,
    "parent_id": parentId,
    "title": title,
    "caption": caption,
    "image": image,
    "link": link,
    "status": status,
    "slider_order": sliderOrder,
    "entry_time": entryTime.toIso8601String(),
  };
}

Answer 1

If my understanding is correct, you want to show images in the Banner. So you should populate your imagesList like this:

List<String> imagesList = [];
snapshot.data!.banner.foreach((e) {
   imagesList.add(snapshot.data!.imgPath+"/"+e.image);
});