Last updated:
0 purchases
flip carousel
A simple infinite horizontal carousel with flip animation which can be used for both image and widgets
📱 Usage #
Import package in your file
import 'package:flip_carousel/flip_carousel.dart';
copied to clipboard
Use FlipCarousel widget
FlipCarousel(items:cardItems);
copied to clipboard
Give a list of data and set the properties as you wish
List<dynamic> cardItems = [
'https://i.ibb.co/QYdQHBw/batman2.jpg',
'https://i.ibb.co/vwhykYp/spider1.jpg',
'https://i.ibb.co/H4VrQS4/spider2.jpg',
Container(color: Colors.amber, child: const FlutterLogo()),
];
FlipCarousel(
items: cardItems,
transitionDuration: const Duration(milliseconds: 400),
isAssetImage: false,
border: Border.all(width: 5, color: const Color(0xFFFFFFFF)),
width: 250,
height: 400,
fit: BoxFit.cover,
perspectiveFactor: 0.002,
layersGap: 30,
onChange: (int pageIndex) {
print(pageIndex);
},
onTap: () {
print("tap");
},
),
copied to clipboard
Customization #
You can add both widgets and ImageUrls as input.
make sure that you have set the the [ isAssetImage ] value base on your source.
Here is the rest of properties that can be modyfied
/// List of image/widgets to be shown in the carousel; Accepts two types of link.
/// For example: `https://...jpg` for online images and `assets/...` for local images.
final List<dynamic> items;
/// Specifies the type of image addresses in [imagesLink].
/// Must be `false` if [imagesLink] contains online images.
/// Must be `true` if [imagesLink] contains local images.
final bool assetImage;
/// Set as the image slider [width].
/// Defaults to 300.
final double width;
/// Set as the image slider [height].
/// Defaults to 450.
final double height;
/// Returns the page index after animation is done .
final Function(int pageIndex)? onChange;
/// Runs the given code onPress .
final Function()? onTap;
/// Set as the main frames [backgroundColor].
final Color? backgroundColor;
/// Determines the value of the [fit] property of the images
/// Defaults to BoxFit.cover.
final BoxFit fit;
/// Determines the space between two [H3DCard].
/// Defaults to 30.
final double layersGap;
/// Determines the perspective transformation of the [H3DCard] when being animated.
/// Defaults to 0.0015.
final double perspectiveFactor;
/// Determines the space between two [H3DCard].
/// Defaults to 30.
final BoxBorder? border;
/// Determines the [borderRadius] of the [H3DCard].
/// Defaults to 30.
final BorderRadius borderRadius;
/// Determines the clip behaviour of the child widget.
/// Defaults to [Clip.hardEdge].
final Clip childClip;
/// Determines [Duration] of transition animation.
/// Defaults to 500 milliseconds.
final Duration transitionDuration;
/// Determines [Visibility] of the transition arrows.
/// Defaults to True.
final bool arrowControllersVisibility;
/// Determines [Color] of the transition arrows.
/// Defaults to [Colors.white].
final Color arrowControllersColor;
/// Determines [tag] of the selected [H3DCard].
final String heroTag;
```#
copied to clipboard
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.