CubixD, a 3d cube

Installation

Add cubixd to your pubspec.yaml dependencies

dependencies:
  cubixd: ^0.1.1

And then import it:

import 'package:cubixd/cubixd.dart';

Features

Add this to your flutter app to get a 3d cube!

Getting started

This package includes 2 widgets:

AnimatedCubixD
CubixD

AnimatedCubixD is the 3d cube animated, this widget uses 3 controllers (AnimationController) for 3 different animations. Includes the shadow, the colorful stars, all animations and the functionality to select a field

CubixD is the static 3d cube, this widget includes the functionality to select a field (without the animation)

The example you saw at the beginning you can do it with the following code:

import 'package:cubixd/cubixd.dart';

Center(
  child: AnimatedCubixD(
    onSelected: ((SelectedSide opt) => opt == SelectedSide.bottom ? false : true),
    size: 200.0,
    left: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/graphql.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),
    front: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/nestjs.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),
    back: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/mongodb.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),
    top: ...,
    bottom: ...,
    right: ...,
  ),
),

AnimatedCubixD

Parameters

| Parameter | Type | Default value | Description | | ----------------- | -------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | advancedXYposAnim | AnimRequirements | - | Advanced XY Position Animation. If you want more control over the AnimationController and the 2 animations that requires, you could set this parameter. Keep in mind that the AnimationController won't forward and dispose automatically when you set this option. You can read more information and examples down below | | afterRestDel | Duration | Duration(miliseconds: 50) | After Restore Delay. This parameter represents the delay after the cubixd restore animation executes to make way to the main animation again | | afterSelDel | Duration | Duration(seconds: 4) | After Selection Delay. This parameter represents the duration that cubixd waits after a face is selected, and right after that time restores the cubixd to the main animation | | back * | Widget | - | The widget that should be displayed on the back face side | | bottom * | Widget | - | The widget that should be displayed on the bottom face side | | buildOnSelect | Widget Function(double, AnimationController) | null | If you don't like the default starts animation that triggers when the user selects a face. With a great freedom, you could set a different one with this parameter. This one is quite complex, so you can read more about this down below | | debounceTime | Duration | Duration(miliseconds: 500) | Debonce Time. The cubixd works with a debouncer, this means that when you constantly move the cubixd to select a face it won't execute the selection until you leave it static with a valid face and wait the duration specified here it will trigger the selection, otherwise if you move it just before time runs, it will "bounce" the selection and count back from 0 this time specified here | | front * | Widget | - | The widget that should be displayed on the front face side | | left * | Widget | - | The widget that should be displayed on the left face side | | onPanUpdate | void Function() | null | On Pan Update. This is a callback that executes whatever the user moves the cubixd to select a face | | onRestCurve | Curve | Curves.fastOutSlowIn | On Restore Curve. This parameter sets the curve that should have the restore animation. Understand the restore animation as the animation that executes after the selection of a face occurs to restore the cubixd to its starting position | | onSelecCurve

Cubixd

Install / Use

README