Cube Swipe Package

Introduction of Cube Swipe Package

The Cube Swipe Package in Flutter provides a unique and engaging swipe animation effect, typically used for swiping between different pages or content views in a 3D cube-like fashion. This effect can enhance the user experience by providing a visually appealing way to navigate through different screens or cards.

Key Features:

• 3D Cube Animation: Provides a cube-like swipe animation for transitioning between views.
• Customizable: Offers various customization options to adjust the swipe effect.

Installation: To use the cube_swipe package, add it to your pubspec.yaml file:

dependencies:
  cube_swipe: ^1.0.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:cube_swipe/cube_swipe.dart';

Properties of Cube Swipe Package

children: A list of widgets to be displayed in the cube swipe view. Each widget represents a page or a card that can be swiped.

CubeSwipe(
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

controller: An optional PageController to control the swipe behavior programmatically. It allows for finer control over the cube swipe, such as setting the initial page or listening to page changes.

CubeSwipe(
  controller: PageController(initialPage: 0),
  children: <Widget>[
    // Your widgets
  ],
)

onPageChanged: A callback function that is called whenever the page changes. It provides the index of the new page, allowing you to perform actions based on the current page.

CubeSwipe(
  onPageChanged: (int page) {
    print("Current page: $page");
  },
  children: <Widget>[
    // Your widgets
  ],
)

scrollDirection: Specifies the direction of the scroll, either horizontal or vertical. The default is Axis.horizontal.

CubeSwipe(
  scrollDirection: Axis.vertical,
  children: <Widget>[
    // Your widgets
  ],
)

viewportFraction: Determines the fraction of the viewport that each page should occupy. This can be used to create a “peek” effect where a part of the next or previous page is visible.

CubeSwipe(
  viewportFraction: 0.8,
  children: <Widget>[
    // Your widgets
  ],
)

Usage:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cube Swipe Example'),
        ),
        body: CubeSwipe(
          controller: PageController(initialPage: 0),
          onPageChanged: (int page) {
            print("Current page: $page");
          },
          scrollDirection: Axis.horizontal,
          viewportFraction: 0.8,
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.blue),
            Container(color: Colors.green),
          ],
        ),
      ),
    );
  }
}

In this example, the Cube Swipe Package is used to create a 3D cube swipe effect with three pages. The controller property is used to set the initial page and control the swipe programmatically. The onPageChanged callback is provided to listen for page changes, and the scrollDirection and viewportFraction properties are set to customize the swipe behavior and appearance.

Final Code: This is the final code with the combination of some above Cube Swipe Package properties.

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 35, 35, 35),
      body: CarouselSlider(
        slideTransform: CubeTransform(),
        slideIndicator: CircularSlideIndicator(
          padding: EdgeInsets.only(
            bottom: 30,
          ),
          currentIndicatorColor: Colors.white,
          indicatorBackgroundColor: Colors.black,
        ),
        unlimitedMode: true,
        children: [
          Container(
            color: Colors.tealAccent,
          ),
          Container(
            color: Colors.deepOrange,
          ),
          Container(
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}

The Cube Swipe package enhances the user experience by providing a visually appealing way to navigate through different content views in a Flutter application. Adjust the properties to fit your specific design and functional requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM