Multiple items in one slide. Flutter - Dart

Question

I want to create a Carousel Slider using carousel_slider flutter package.

When I want to display multiple items in one slide with everything works fine as long as I have an even list length, but if I have an odd list length the last slide gets an error.

Here is my code

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

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];    
class MultipleItemDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Multiple item in one slide demo')),
          body: Container(
            child: CarouselSlider.builder(
              options: CarouselOptions(
                aspectRatio: 2.0,
                enlargeCenterPage: false,
                viewportFraction: 1,
              ),
              itemCount: (imgList.length / 2).round(),
              itemBuilder: (context, index) {
                final int first = index * 2;
                final int second = first + 1;
                return Row(
                  children: [first, second].map((idx) {
                    return Expanded(
                      flex: 1,
                      child: Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        child: Image.network(imgList[idx], fit: BoxFit.cover),
                      ),
                    );
                  }).toList(),
                );
              },
            )
          ),
        );
      }
    }

Solution

It's because of the way how you calculate the indices for which image to put in the Row. Currently you always declare and use first and second for the Row which would not work if the amount of images is odd since then there is no second image. I modified your solution a bit to work. You still need to adjust the size of your Row so your single image will have the same size as the ones which are paired:

class MultipleItemDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int imageCount = (imgList.length / 2).round();
    return Scaffold(
      appBar: AppBar(title: Text('Multiple item in one slide demo')),
      body: Container(
          child: CarouselSlider.builder(
        options: CarouselOptions(
          aspectRatio: 2.0,
          enlargeCenterPage: false,
          viewportFraction: 1,
        ),
        itemCount: imageCount,
        itemBuilder: (context, index) {
          final int first = index;
          final int second = index < imageCount - 1 ? first + 1 : null;
          return Row(
            children: [first, second].map((idx) {
              return idx != null
                  ? Expanded(
                      flex: 1,
                      child: Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        child: Image.network(imgList[idx], fit: BoxFit.cover),
                      ),
                    )
                  : Container();
            }).toList(),
          );
        },
      )),
    );
  }
}

Comments

[Yusif Jasim]

Thanks, I made it like that to resize the last image : ` : Expanded( flex: 1, child: Container(), ); }).toList(), ); `

[Dinesh]

I guess kounex has missed to calculate the index final int first = index * 2; final int second = index * 2 < productList.length - 1 ? first + 1 : null;

[Serdar]

Fixed version. final int first = index * 2; final int? second = index <= (controller.imgList.length / 2).ceil() - 1 ? first + 1 : null;