Remove margin between carousel images

Question

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:

What I want:

user_10157127 · Answer

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

Remove margin between carousel images

1 Answers