deepvoice_client/lib/modules/meeting/views/mind_map_tab.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

import '../controllers/meeting_details_controller.dart';

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

  @override
  State<MindMapTab> createState() => _MindMapTabState();
}

class _MindMapTabState extends State<MindMapTab> {
  late final WebViewController _controller;
  final _meetingDetailsController = Get.find<MeetingDetailsController>();

  @override
  void initState() {
    super.initState();
    String html = '''
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MindMap</title>
  <script>
    window.markmap = {
      autoLoader: {
        toolbar: true,
      },
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .markmap {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .markmap>svg {
      width: 100%;
      height: 100%;
    }

    .markmap>.mm-toolbar {
      top: 20px !important;
      bottom: initial !important;
    }

    .markmap>.mm-toolbar>.mm-toolbar-brand {
      display: none;
    }

    .markmap>.mm-toolbar>.mm-toolbar-item:nth-child(2) {
      margin-left: 0;
    }
  </style>
</head>

<body>
  <div class="markmap">
    <script type="text/template">
      ---
      markmap:
        maxWidth: 300
        colorFreezeLevel: 2
      ---
      ${_meetingDetailsController.meetingDetails.value.summary}
    </script>
  </div>
</body>

</html>
    ''';
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadHtmlString(html);
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: _controller,
    );
  }
}