import 'dart:html' as html;
import 'dart:ui' as ui;

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

void main() {
  runApp(
    MaterialApp(
      home: _App(),
    ),
  );
}

class _App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
            _RotatingClipRRect(),
      );
  }
}

class _RotatingClipRRect extends StatefulWidget {
  @override
  _RotatingClipRRectState createState() => _RotatingClipRRectState();
}

class _RotatingClipRRectState extends State<_RotatingClipRRect> with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 5000),
      value: 0,
      lowerBound: 0,
      upperBound: 1,
    )..repeat();

    _animation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.linear,
    );

    ui.platformViewRegistry.registerViewFactory(
      'test', (_) => html.DivElement()..style.background = '#fabada'
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          child: RotationTransition(
            turns: _animation,
            child: SizedBox(
              width: 320,
              height: 200,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: HtmlElementView(viewType: 'test',),
              ),
            ),
          ),
        ),
      );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}