Flutter CarouselSlider shows Invalid value and wants to show only 3 items per slide

Question

I want to show 3 items per slide in CarouselSlider I have data from API which returns the image from the database. But as per userid I got only one item in the database but CarouselSlider does not show then and gives me the error of RangeError (index): Invalid value: Only valid value is 0: 1

Please help me how to show the return data no matter how many it is.

the error is not shown until there are more than 3 items on the slide. but I want to show all images in API.

here is the error image in the console:-

Here is my code:-

class ProfileImages extends StatefulWidget {

 ProfileImages({Key? key}) : super(key: key);

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

class _ProfileImages extends State<ProfileImages>{

 var UsriD = Auth.prefs?.getString('usrid');
 var Imagedata;
 var img = "";
 var user = "";
 //var usrimgs = "";



 @override
 void initState() {
  super.initState();
  getImageData();
 }

getImageData() async{
  var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','Usrid': '${UsriD}'}));
Imagedata = jsonDecode(res.body);
print(Imagedata);
setState(() {});
print(res.body);
}

@override
Widget build(BuildContext context) {
//print(Imagedata);

return
  Imagedata != null? CarouselSlider.builder(
          options: CarouselOptions(
            //height: 150,
            aspectRatio: 16/9,
            //viewportFraction: 0.8,
            enlargeCenterPage: false,
            viewportFraction: 1,
          ),
          itemCount: (Imagedata.length / 2).round(),
          itemBuilder: (BuildContext context, int index, int  pageViewIndex) {
            final int first = index * 2;
            final int second = first + 1;
            return
              Row(
              children: [first, second].map((idx) {
              return Expanded(
                  flex: 2,
                  child: Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    child:
                    Image.network(
                      "https://www.*******.net/files/images/${Imagedata[idx]['image']}",
                      fit: BoxFit.cover,
                      width: 200,
                      height: 150,
                    ),
                  ),
                  Positioned(
                    top: 9,
                    right: 9,
                    child: InkWell(
                      onTap: () async{
                        img = "${Imagedata[idx]['image']}";
                        user = '${UsriD}';

                        final body = null;
                        final url = Uri.https('www.*******.net', '/index.php',{'act':'usrPhotosdel','img': img, 'user': user});
                        final response = await http.post(
                            url,
                            headers: {'Content-Type': 'application/json'},
                            body: body
                        );
                        print(url);
                        int statusCode = response.statusCode;
                        var responseBody = json.decode(response.body);

                       // var list = responseBody['error']; //Prints "in new line"

                        var statusRes = responseBody['status'];
                        //var UserPhone = responseBody['phone'];
                        //var UserID = responseBody['usrid'];
                        if(statusRes == 'success'){
                          print('success: '+statusRes);
                          // Navigator.push(
                          //   context,
                          //   MaterialPageRoute(
                          //       builder: (context) => Editprofile()),
                          // );
                          Navigator.of(context).pop();
                        } else {
                          print('error: '+statusRes);
                        }
                        //favIcons[index] = "assets/images/Fav_2.svg";
                        setState(() {});
                      },
                      child: SvgPicture.asset(
                        width: 30,
                        'assets/images/close.svg',
                        height: 30,
                        fit: BoxFit.cover,
                      ),
                    ),
                  )
                ],

              ));
            }).toList(),
            );
          }
      ): const Center(
    child: CircularProgressIndicator(),
  );
  }
  }

And also it shows only 2 items per slide but I want to show 3 items per slide please anyone helps me with how I do this also I want to show all data that API pulls from the database. Please help me.