如何在Flutter中創建輪播效果

Question

我想要一個帶有過渡效果的圖像輪播，如何在 flutter 中構建自動更改或手動輪播效果。

我想變成這樣

請建議我該怎么做？

Answer 1

這是使用此輪播 package 輪播Package的代碼示例，它為您提供了一個基本解決方案，當輪播滾動時會改變顏色。

請注意，此 package 中有更多選項可供自定義。

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

class CarouselExample extends StatefulWidget {
  const CarouselExample({Key? key}) : super(key: key);

  @override
  _CarouselExampleState createState() => _CarouselExampleState();
}

class _CarouselExampleState extends State<CarouselExample> {



  var _colors = [Colors.red, Colors.green, Colors.lime, Colors.cyan, Colors.pink];
  late Color _color = _colors[0];

  _updateColor(int i){
    _color = _colors[i];
    setState(() {
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    'assets/images/ScarfMan.png',
                    scale: 0.20,
                    width: 900,
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Container(color: _color.withOpacity(0.20)),
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment(0, 0.82),
            child: Container(
              height: 70,
              width: 70,
              decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(1000),
                  border: Border.all(color: Colors.white, width: 10)),
            ),
          ),
          Align(
            alignment: Alignment(0, 0.80),
            child: CarouselSlider(
              items: _colors
                  .map((e) => Container(
                        decoration: BoxDecoration(
                            color: e,
                            borderRadius: BorderRadius.circular(1000)),
                        width: 50,
                      ))
                  .toList(),
              options: CarouselOptions(
                height: 50,
                viewportFraction: 0.30,
                onPageChanged: (index, reason){
                  setState(() {
                    _updateColor(index);
                  });
                },
                enableInfiniteScroll: false,
              ),
            ),
          ),
        ],
      ),
    );
  }
}