flutter_bug.dart

import 'dart:math';

import 'package:flutter/material.dart';

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 MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final AnimationController _orientationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 2),
  )..addListener(() {
      setState(() {});
    });

  late final AnimationController _depthController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  )..addListener(() {
      setState(() {});
    });

  Widget? rainbow;

  @override
  void initState() {
    super.initState();
    _orientationController.repeat();
    _depthController.repeat(reverse: true);

    rainbow = genRainbow();
  }

  @override
  void dispose() {
    _orientationController.dispose();
    _depthController.dispose();
    super.dispose();
  }

  Color genColor() {
    // return Colors.red;
    final Random random = Random();
    return Color.fromRGBO(
      random.nextInt(255),
      random.nextInt(255),
      random.nextInt(255),
      1,
    );
  }

  /// A recursive function to create a nested widget tree of rainbow colors.
  Widget genRainbow([int index = 0]) {
    if (index > 5) {
      
      // DELETE ME
      return Opacity(
        opacity: 1,
        child: Image.network(
          'https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png',
          fit: BoxFit.contain,
        ),
      );
    }

    // As we go deeper, the size needs to get smaller.
    final size = 200 - index * 20.0;

    rainbow = AnimatedBuilder(
      animation: _depthController,
      builder: (context, child) {
        return Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..translate(
              0.0,
              0.0,
              _depthController.value * -30,
            ),
          transformHitTests: false,
          alignment: FractionalOffset.center,
          child: child,
        );
      },
      child: Container(
        width: size,
        height: size,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
          color: genColor(),
        ),
        child: genRainbow(index + 1),
      ),
    );

    return rainbow!;
  }

  @override
  Widget build(BuildContext context) {
    final double angle = ((1 - _orientationController.value) * 360) / 180 * pi;

    final double x = sin(angle) * 0.5;
    final double y = cos(angle) * 0.5;

    final double rotX = cos(x) * sin(y);
    final double rotY = -sin(x);

    final matrix = Matrix4.identity()
      ..setEntry(3, 2, 0.001)
      ..rotateX(rotX)
      ..rotateY(rotY);

    return Scaffold(
      body: Transform(
        transform: matrix,
        alignment: Alignment.center,
        child: Center(child: rainbow),
      ),
    );
  }
}