Создать трепетное изображение карусели

Question

Как я могу создать карусель изображений, как в примере ниже?

Наложение карусели изображений Я пытаюсь сделать это с помощью следующего кода, но это только устанавливает изображения рядом друг с другом.

Widget build(BuildContext context) {
return Container(
  width: 150,
  child: CarouselSlider(items: ['https://picsum.photos/200/300','https://picsum.photos/200/300','https://picsum.photos/200/300'].map((i) {
    return Builder(
      builder: (BuildContext context) {
      return Container(
        width: 150, 
        margin: EdgeInsets.symmetric(horizontal: 2.0),
      decoration: BoxDecoration(color: Colors.amber),
      child: GestureDetector(child: Image.network(i,fit:BoxFit.fill,),
      onTap: (){
       //add TODO:
      },
      )
    );
    },
  );
  }).toList(),
  height: 200.0,

  ),
);

Я попытался с выравниванием, но это не сработало.

Answer 1

Вы можете использовать пакет https://pub.dev/packages/flutter_multi_carousel

фрагмент кода

Center(
        child: Carousel(
            height: 350.0,
            width: 350,
            type: "slideswiper",
            indicatorType: "bar",
            arrowColor: Colors.white,
            axis: Axis.horizontal,
            showArrow: true,
            children: List.generate(
                7,
                (i) => Center(
                      child: Container(color: Colors.red),
                    ))),
      ),

рабочая демоверсия

полный код

import 'package:flutter/material.dart';
import 'package:flutter_multi_carousel/carousel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Demo',
      home: CarouselExample(),
    );
  }
}

class CarouselExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Carousel(
            height: 350.0,
            width: 350,
            type: "slideswiper",
            indicatorType: "bar",
            arrowColor: Colors.white,
            axis: Axis.horizontal,
            showArrow: true,
            children: List.generate(
                7,
                (i) => Center(
                      child: Container(color: Colors.red),
                    ))),
      ),
    );
  }
}