一张幻灯片中的多个项目。 颤动 - 飞镖

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(),
                );
              },
            )
          ),
        );
      }
    }

Answer 1

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(),
          );
        },
      )),
    );
  }
}