1

Why is there a vertical margin line between images in this Flutter carousel? The line is flickering when I slide the carousel.

This bug happens on the device (Nokia 7 Plus) but not the emulator.

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

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: [
            Text('Test'),
            CarouselSlider(
              options: CarouselOptions(
                aspectRatio: 1.8,
              ),
              items: List.generate(5, ((i) {
                return Container(
                  color: Colors.grey[200],
                  child: Column(
                    children: [
                      Image.network(
                        'http://picsum.photos/id/$i/400/200',
                      ),
                      Text('TEST'),
                    ],
                  ),
                );
              })),
            ),
          ],
        ),
      ),
    ),
  );
}

What I have:

enter image description here

What I want:

enter image description here

Patrick
  • 3,578
  • 5
  • 31
  • 53

1 Answers1

0

The issue I've got from container border. So if you use container on top widget it will have padding and will get this. It is easier to deal with Stack widget in this case.

CarouselSlider(
  options: CarouselOptions(
    aspectRatio: 1.8,
    viewportFraction: .4,
    clipBehavior: Clip.none,
  ),
  items: List.generate(5, ((i) {
    return itemBUild(i);
  })),
),

And item build

Widget itemBUild(int id) {
  return Stack(
    fit: StackFit.expand,
    children: [
      // Image.network(
      //   'http://picsum.photos/id/$i/400/200',
      // ),
      Positioned.fill(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.red, border: Border.all(color: Colors.red)),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          color: Colors.green,
          child: Text('TEST', textAlign: TextAlign.center,),
        ),
      ),
    ],
  );
}

enter image description here

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56