flutter_3d_carousel 1.0.0 copy "flutter_3d_carousel: ^1.0.0" to clipboard
flutter_3d_carousel: ^1.0.0 copied to clipboard

An animated 3d carousel

flutter_3d_carousel #

This is a 3d carousel animation project built in flutter. The 3D carousel responds to button clicks and swipes and can rotate infinitely.

It is implemented natively in flutter. No external dependencies are used.

Example: #

Basic Example:

  @override
  Widget build(BuildContext context) {
    return CarouselWidget3D(
      radius: MediaQuery.sizeOf(context).width,
      children: List.generate(
        6,
        (index) => Container(
          width: MediaQuery.sizeOf(context).width,
          height: MediaQuery.sizeOf(context).height,
          color: Colors.blue,
        ),
      ),
    );
  }

With full customization:


class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CarouselWidget3D(
          radius: MediaQuery.sizeOf(context).width,
          childScale: 0.9,
          backgroundBlur: 3,
          dragEndBehavior: DragEndBehavior.snapToNearest,
          tapBehavior: TapBehavior.startAndFreeze,
          isDragInteractive: true,
          shouldRotate: true,
          spinWhileRotating: true,
          timeForFullRevolution: 20000,
          snapTimeInMillis: 100,
          perspectiveStrength: 0.001,
          dragSensitivity: 1.0,
          onValueChanged: (newValue) {
            // ignore: avoid_print
            print(newValue);
          },
          children: List.generate(
            colors.length,
            (index) => Container(
              width: MediaQuery.sizeOf(context).width,
              height: MediaQuery.sizeOf(context).height,
              color: colors[index],
            ),
          ),
        ),
      ),
    );
  }
}

List<Color> colors = [
  Colors.lightBlue,
  Colors.greenAccent,
  Colors.indigo,
  Colors.grey,
  Colors.yellow,
  Colors.purple,
];

Screen Recording #

[Screen recording of the animation]

Features to add: #

  • Add support for anticlockwise rotation
  • Add Axis option to make it a vertical carousel
  • Add a way to stop and start the animation from outside the widget

Contributing #

Contributions from anyone are welcome. To contribute to the project, please follow these steps:

  • Fork the repository.
  • Create a new branch for your feature or bugfix.
  • Make your changes and commit them.
  • Push your changes to your forked repository.
  • Open a pull request against the main branch of this repository.

Please ensure that your code follows the project's coding standards and includes appropriate tests.