3D listTIle

main.dart

/// 3D tile wip
/// Fixme: proper tap/hover area

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Home(),
      ),
    ),
  );
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Offset offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    const cubeSize = Size(450, 200);
    var container = Container(
      width: cubeSize.width,
      height: cubeSize.height,
      color: Colors.deepPurple.withOpacity(.1),
      child: Cube(
        width: cubeSize.width,
        height: cubeSize.height,
        leftChild: const Center(
            child: Text(
          "Hey",
          style: TextStyle(fontSize: 40),
        )),
      ),
    );
    return GestureDetector(
      onPanUpdate: (d) {
        offset += d.delta;

        setState(() {});
      },
      child: Center(
        child: Container(
          alignment: Alignment.center,
          height: cubeSize.height * 2,
          width: cubeSize.width,
          child: Stack(
            children: [
              for (int i = 0; i < 2; i++)
                Positioned(
                  top: (1 - i) * 200,
                  child: container,
                ),
            ],
          ),
        ),
      ),
    );
  }
}

class Cube extends StatefulWidget {
  const Cube({
    super.key,
    required this.height,
    required this.width,
    this.leftChild,
  });
  final double height;
  final double width;
  final Widget? leftChild;

  @override
  State<Cube> createState() => _CubeState();
}

class _CubeState extends State<Cube> {
  Matrix4 transform = Matrix4.identity();

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      transform: transform,
      width: widget.width,
      duration: Durations.medium1,
      child: Transform(
        alignment: Alignment.center,
        transform: Matrix4.identity()
          ..rotateX(15 * pi / 180)
          ..rotateY(-30 * pi / 180),
        child: Material(
          color: Colors.transparent,
          child: Stack(
            fit: StackFit.expand,
            children: [
              Transform(
                transform: Matrix4.identity()..rotateX(90 * pi / 180),
                alignment: Alignment.bottomCenter,
                child: Container(
                  color: Colors.red,
                  child: const FlutterLogo(size: 200),
                ),
              ),
              Align(
                alignment: Alignment.topLeft,
                child: Transform(
                  transform: Matrix4.identity()..rotateY(90 * pi / 180),
                  alignment: Alignment.topLeft,
                  child: Container(
                    height: widget.height,
                    width: widget.height,
                    color: Colors.green,
                    child: widget.leftChild ?? const FlutterLogo(),
                  ),
                ),
              ),
              Transform(
                transform: Matrix4.identity()..rotateX(-90 * pi / 180),
                alignment: Alignment.topLeft,
                child: Container(
                  color: Colors.orange,
                  child: const FlutterLogo(size: 200),
                ),
              ),
              Transform(
                transform: Matrix4.translationValues(0, 0, -200),
                alignment: Alignment.center,
                child: Container(
                  color: Colors.deepPurpleAccent,
                  child: const FlutterLogo(size: 200),
                ),
              ),
              Material(
                color: Colors.transparent,
                clipBehavior: Clip.antiAlias,
                child: InkWell(
                  onTap: () {},
                  onHover: (value) {
                    if (value) {
                      transform = Matrix4.translationValues(100, 0, 0);
                    } else {
                      transform = Matrix4.identity();
                    }
                    setState(() {});
                  },
                  child: const SizedBox.expand(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is the hover issue I am trying to fix. My initial thought was to create a customShape.

Also this point should supposed to trigger 1st instead of 2nd(transform)

I am trying to recreate this navbar (Top-Left)

https://yeasin50.github.io/AssetsFor_/