Can we integrate Flutter pages into Hugo

Question

Looking to integrate specific flutter pages and stateful widgets in Hugo. If we can't do specific widgets then how to include the whole application.

I have referred to this flutter code but how can we implement it in Hugo.

// ignore_for_file: avoid_web_libraries_in_flutter

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:js/js.dart' as js;
import 'package:js/js_util.dart' as js_util;

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

enum DemoScreen { counter, textField, custom }

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

  @override
  State<MyApp> createState() => _MyAppState();
}

@js.JSExport()
class _MyAppState extends State<MyApp> {
  final _streamController = StreamController<void>.broadcast();
  DemoScreen _currentDemoScreen = DemoScreen.counter;
  int _counterScreenCount = 0;

  @override
  void initState() {
    super.initState();
    final export = js_util.createDartExport(this);
    js_util.setProperty(js_util.globalThis, '_appState', export);
    js_util.callMethod<void>(js_util.globalThis, '_stateSet', []);
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  @js.JSExport()
  void increment() {
      setState(() {
        _counterScreenCount++;
        _streamController.add(null);
      });
  }

  @js.JSExport()
  void addHandler(void Function() handler) {
    _streamController.stream.listen((event) {
      handler();
    });
  }

  @js.JSExport()
  int get count => _counterScreenCount;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Element embedding',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: CounterDemo(
          title: 'Counter',
          numToDisplay: _counterScreenCount,
          incrementHandler: increment,
        ),
    );
  }
}

class CounterDemo extends StatefulWidget {
  final String title;
  final int numToDisplay;
  final VoidCallback incrementHandler;

  const CounterDemo({
    super.key,
    required this.title,
    required this.numToDisplay,
    required this.incrementHandler,
  });

  @override
  State<CounterDemo> createState() => _CounterDemoState();
}

class _CounterDemoState extends State<CounterDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${widget.numToDisplay}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: widget.incrementHandler,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

There is a web embedding sample for Angular here. https://github.com/flutter/samples/tree/main/web_embedding