Cube 4 Sides

readme.md

Cube 4 Sides

Created with <3 with dartpad.dev.

main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Cube(title: 'Flutter Demo Home Page'),
    );
  }
}

class Cube extends StatefulWidget {
  const Cube({super.key, required this.title});

  final String title;

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

class _CubeState extends State<Cube> {
  Offset offset = Offset.zero;

  final sideAmber = Transform(
    key: const ValueKey("side1"),
    transform: Matrix4.identity()..translate(0.0, 0.0, -100),
    alignment: Alignment.center,
    child: Container(
      color: Colors.amber,
      child: const FlutterLogo(
        size: 200,
      ),
    ),
  );
  final sideRed = Transform(
    key: const ValueKey("side2"),
    transform: Matrix4.identity()
      ..translate(-100.0, 0.0, 0.0)
      ..rotateY(-pi / 2),
    alignment: Alignment.center,
    child: Container(
      color: Colors.red,
      child: const FlutterLogo(
        size: 200,
      ),
    ),
  );
  final sideBlue = Transform(
    key: const ValueKey("side3"),
    transform: Matrix4.identity()..translate(0.0, 0.0, 100.0),
    child: Container(
      color: Colors.blue,
      child: const FlutterLogo(
        size: 200,
      ),
    ),
  );
  final sidePurple = Transform(
    key: const ValueKey("side4"),
    transform: Matrix4.identity()
      ..translate(100.0, 0.0, 0.0)
      ..rotateY(-pi / 2),
    alignment: Alignment.center,
    child: Container(
      color: Colors.purple,
      child: const FlutterLogo(
        size: 200,
      ),
    ),
  );

  List<Widget> sides = [];

  @override
  void initState() {
    super.initState();
    sides = [sideAmber, sideRed, sideBlue, sidePurple];
  }

  void update(Offset value) {
    setState(() {
      offset = Offset((offset.dx + value.dx) % 360, (offset.dy + value.dy) % 360);
      if (offset.dx > 315) {
        sides = [sidePurple, sideAmber, sideRed, sideBlue];
      } else if (offset.dx > 180) {
        sides = [sidePurple, sideBlue, sideAmber, sideRed];
      } else if (offset.dx <= 90) {
        sides = [sideAmber, sideRed, sidePurple, sideBlue];
      } else if (offset.dx > 90) {
        sides = [sideRed, sideBlue, sidePurple, sideAmber];
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Cube"),
        backgroundColor: Colors.green,
      ),
      body: Stack(
        children: [
          Center(
            child: Transform(
              key: const ValueKey('cube'),
              transform: Matrix4.identity()
                ..rotateX(-offset.dy * pi / 180)
                ..rotateY(-offset.dx * pi / 180),
              alignment: Alignment.center,
              child: Stack(
                children: sides,
              ),
            ),
          ),
          Positioned.fill(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: GestureDetector(
                    onPanUpdate: (details) {
                      update(details.delta);
                    },
                    child: Container(color: Colors.transparent),
                  ),
                ),
                Text('x: ${offset.dx} y: ${offset.dy}')
              ],
            ),
          ),
        ],
      ),
    );
  }
}