创建 flutter 图像轮播

Question

如何创建如下例所示的图片轮播？

Image Carousel Overlay 我尝试使用以下代码，但只将图像设置为彼此相邻。

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

创建 flutter 图像轮播

Create flutter image carousel

plugins

image

carousel

dart

flutter