Better way to transfer CSS animation into flutter project

Question

I recently co-worked with other designers. They used to provide some CSS animation examples from codepen that need to be applied to the current project. The animation may be simple or complicated. For example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
}

.music {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 300px;
  height: 200px;
}

.music .bar {
  width: 12px;
  height: 2px;
  border-radius: 10px;
  background-color: white;
  animation: up_down 1.5s ease-in-out infinite;
}

@keyframes up_down {
  0%,
  100% {
    height: 2px;
  }
  50% {
    height: 80px;
  }
}

.music .bar:nth-child(1) {
  background-color: purple;
  animation-delay: 1s;
}

.music .bar:nth-child(2) {
  background-color: crimson;
  animation-delay: 0.8s;
}

.music .bar:nth-child(3) {
  background-color: deeppink;
  animation-delay: 0.6s;
}

.music .bar:nth-child(4) {
  background-color: orange;
  animation-delay: 0.4s;
}

.music .bar:nth-child(5) {
  background-color: gold;
  animation-delay: 0.2s;
}

.music .bar:nth-child(6) {
  background-color: gold;
  animation-delay: 0.2s;
}

.music .bar:nth-child(7) {
  background-color: orange;
  animation-delay: 0.4s;
}

.music .bar:nth-child(8) {
  background-color: deeppink;
  animation-delay: 0.6s;
}

.music .bar:nth-child(9) {
  background-color: crimson;
  animation-delay: 0.8s;
}

.music .bar:nth-child(10) {
  background-color: purple;
  animation-delay: 1s;
}

<div class='music'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

I crafted the animation from Flutter Canvas once, but also wonder if there is a better way to apply the CSS animation to the Flutter Project (which used to be very easy when applying it to the website)

Answer 1

Firstly: write this code in file .html inside assets folder

<div class='music'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>


<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: black;
  }

  .music {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 300px;
    height: 200px;
  }

  .music .bar {
    width: 12px;
    height: 2px;
    border-radius: 10px;
    background-color: white;
    animation: up_down 1.5s ease-in-out infinite;
  }

  @keyframes up_down {

    0%,
    100% {
      height: 2px;
    }

    50% {
      height: 80px;
    }
  }

  .music .bar:nth-child(1) {
    background-color: purple;
    animation-delay: 1s;
  }

  .music .bar:nth-child(2) {
    background-color: crimson;
    animation-delay: 0.8s;
  }

  .music .bar:nth-child(3) {
    background-color: deeppink;
    animation-delay: 0.6s;
  }

  .music .bar:nth-child(4) {
    background-color: orange;
    animation-delay: 0.4s;
  }

  .music .bar:nth-child(5) {
    background-color: gold;
    animation-delay: 0.2s;
  }

  .music .bar:nth-child(6) {
    background-color: gold;
    animation-delay: 0.2s;
  }

  .music .bar:nth-child(7) {
    background-color: orange;
    animation-delay: 0.4s;
  }

  .music .bar:nth-child(8) {
    background-color: deeppink;
    animation-delay: 0.6s;
  }

  .music .bar:nth-child(9) {
    background-color: crimson;
    animation-delay: 0.8s;
  }

  .music .bar:nth-child(10) {
    background-color: purple;
    animation-delay: 1s;
  }
</style>

secondly: Install webview_flutter package, Then write the following:

import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<HtmlWidgetExample> createState() => _HtmlWidgetExampleState();
}

class _HtmlWidgetExampleState extends State<HtmlWidgetExample> {
  String? htmlContent;

  @override
  void initState() {
    super.initState();
    loadHtml();
  }

  loadHtml() async {
    htmlContent = await rootBundle.loadString('assets/yourFile.html');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (htmlContent == null) return const SizedBox();
    return WebView(
      initialUrl: Uri.dataFromString(
        htmlContent!,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8'),
      ).toString(),
      backgroundColor: Colors.transparent,
      javascriptMode: JavascriptMode.unrestricted,
      onPageFinished: (String url) {},
    );
  }
}