// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

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

void main() => runApp(const MyApp());

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

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

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(),
      ),
      body: Stack(children: [
        for (var i = 0; i < 10; i++)
          Positioned(
              top: i * 30,
              width: 100,
              height: 30,
              left: 0,
              child: Container(
                  decoration: const BoxDecoration(color: Colors.white),
                  clipBehavior: Clip.none,
                  child: HtmlElementView.fromTagName(
                      tagName: "div",
                      onElementCreated: (element) {
                        final div = element as HTMLDivElement;
                        div.innerText = "$i";
                        div.style.background = "#eee";
                        div.style.border = "1px solid #000";
                      }))),
      ]),
    );
  }
}