Sample Flutter login form implemented using HTML DOM

login.dart

import 'dart:js_interop';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const LoginPage(),
    );
  }
}

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DOM-based login form example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: HtmlElementView.fromTagName(
                tagName: 'div',
                onElementCreated: _onFormHostCreated,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onFormHostCreated(Object untypedHostElement) {
    final hostElement = untypedHostElement as web.HTMLDivElement;
    hostElement.style
      ..display = 'flex'
      ..flexDirection = 'column'
      ..alignItems = 'center'
      ..justifyContent = 'center'
      ..padding = '20px'
      ..gap = '10px';

    final userNameField = web.HTMLInputElement();
    userNameField.type = 'text';
    hostElement.append(_createLabeledField('Username', userNameField));

    final passwordField = web.HTMLInputElement();
    passwordField.type = 'password';
    hostElement.append(_createLabeledField('Password', passwordField));

    final loginButton = web.HTMLButtonElement();
    loginButton.innerText = 'Login';
    hostElement.append(loginButton);
    loginButton.addEventListener(
      'click',
      (web.Event _) {
        print(
          'Login clicked: user = "${userNameField.value}"; password = "${passwordField.value}"',
        );
      }.toJS,
    );
  }

  web.HTMLDivElement _createLabeledField(String label, web.HTMLInputElement input) {
    final container = web.HTMLDivElement();
    container.style
      ..display = 'flex'
      ..flexDirection = 'row'
      ..gap = '10px';

    final labelElement = web.HTMLDivElement();
    labelElement.innerText = label;

    container
      ..append(labelElement)
      ..append(input);
    return container;
  }
}