A simple Carousel widget with Transition for Flutter apps.

carousel_with_transition.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class Carousel<T> extends StatefulWidget {
  final Widget child;
  final List<T> items;
  final double itemExtent;
  final double itemWidth;
  final double itemHorizontalMargin;
  final double listHeight;
  final double itemsConsumedWidth;

  const Carousel({
    Key key,
    @required this.items,
    @required this.child,
    this.itemExtent,
    this.itemWidth = 120.0,
    this.itemHorizontalMargin = 4.0,
    this.listHeight = 200.0,
  })  : assert(items != null),
        assert(child != null),
        itemsConsumedWidth = itemWidth + (itemHorizontalMargin * 2),
        super(key: key);

  @override
  _CarouselState<T> createState() => _CarouselState<T>();
}

class _CarouselState<T> extends State<Carousel<T>> {
  ScrollController _scrollController;
  double scrollOffset = 0;

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      setState(() {
        scrollOffset =
            _scrollController.position.pixels / widget.itemsConsumedWidth;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.listHeight,
      child: ListView.builder(
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        physics: SnappingListScrollPhysic(
            itemWidth: widget.itemWidth + (widget.itemHorizontalMargin * 2)),
        itemCount: widget.items.length,
        itemBuilder: (context, i) {
          final double scale =
              ((1 - math.min((i - scrollOffset).abs(), 1.0)) * (1 - 0.8)) + 0.8;
          return Transform.scale(
            scale: scale,
            child: Container(
              width: widget.itemWidth,
              margin:
                  EdgeInsets.symmetric(horizontal: widget.itemHorizontalMargin),
              alignment: Alignment.center,
              child: widget.child,
            ),
          );
        },
      ),
    );
  }
}

class SnappingListScrollPhysic extends ScrollPhysics {
  final double itemWidth;

  const SnappingListScrollPhysic({
    @required this.itemWidth,
    ScrollPhysics parent,
  }) : super(parent: parent);

  @override
  SnappingListScrollPhysic applyTo(ScrollPhysics ancestor) =>
      SnappingListScrollPhysic(
        parent: buildParent(ancestor),
        itemWidth: itemWidth,
      );

  double _getItem(ScrollPosition position) => (position.pixels) / itemWidth;

  double _getPixels(ScrollPosition position, double item) =>
      math.min(item * itemWidth, position.maxScrollExtent);

  double _getTargetPixels(
      ScrollPosition position, Tolerance tolerance, double velocity) {
    double item = _getItem(position);
    if (velocity < -tolerance.velocity) {
      item -= 0.5;
    } else if (velocity > tolerance.velocity) {
      item += 0.5;
    }
    return _getPixels(position, item.roundToDouble());
  }

  @override
  Simulation createBallisticSimulation(
      ScrollMetrics position, double velocity) {
    // If we're out of range and not headed back in range, defer to the parent
    // ballistics, which should put us back in range at a page boundary.
    if ((velocity <= 0.0 && position.pixels <= position.minScrollExtent) ||
        (velocity >= 0.0 && position.pixels >= position.maxScrollExtent)) {
      return super.createBallisticSimulation(position, velocity);
    }
    final Tolerance tolerance = this.tolerance;
    final double target = _getTargetPixels(position, tolerance, velocity);
    if (target != position.pixels) {
      return ScrollSpringSimulation(spring, position.pixels, target, velocity,
          tolerance: tolerance);
    }
    return null;
  }

  @override
  bool get allowImplicitScrolling => false;
}