Иногда есть виджет Flutter, компонент или даже целые приложения, которые вы хотите встроить в существующую веб-страницу или приложение. Хотя Flutter для Интернета все еще находится в стадии бета-тестирования, никогда не рано поэкспериментировать с возможностями использования Flutter для создания интересных приложений в Интернете.
Отказ от ответственности: этот подход является временным решением, пока сам Flutter не будет завернут в веб-компонент, и основан на хаке Роди Дэвиса, найденном здесь.
Эта проблема
Текущая реализация Flutter для Интернета переопределяет элемент body в вашей DOM, что делает невозможным по умолчанию встраивание Flutter в качестве компонента. Я столкнулся с этой проблемой, когда составлял свое портфолио, в котором я демонстрировал демонстрационные приложения, отображаемые в реальном времени в браузере.
Хотя это просто в веб-приложении, предназначенном только для Flutter, его сложнее интегрировать в существующий веб-проект.
Решение
Поскольку мы не можем обойти Flutter, переопределив элемент <body>, мы можем определить пользовательский элемент HTML, у которого есть собственный элемент <body>, доступный для свободного использования Flutter, и заключить его в <iframe>, чтобы избежать коллизий. Чтобы определить пользовательский элемент HTML, мы сначала создаем разметку в файле HTML:
А чтобы определить элемент, нам понадобится JavaScript:
По умолчанию все, что мы делаем, - это расширяем класс HTMLElement и возвращаем <iframe>, извлекающий наш app.html файл, который, в свою очередь, монтирует наш экземпляр Flutter.
Чтобы связать это с нашим существующим веб-сайтом, мы просто импортируем определение настраиваемого элемента, и мы можем использовать наш экземпляр Flutter в качестве веб-компонента, где бы мы ни хотели!
Чтобы завершить это, нам просто нужно создать наш проект флаттера, используя flutter build web, и переместить выходные данные main.dart.js и другие статические файлы, например. assets и manifest.json в тот же каталог, что и наш веб-контент, и все готово.
Совет: вы можете использовать любой исполнитель задач / сборщик модулей для автоматизации этого процесса.
Результат 🎉
Демонстрационное приложение Flutter теперь встроено в существующий веб-сайт. Хотя демонстрация представляет собой чистый HTML / CSS / JS, принцип тот же для React, Vue, Svelte и других.
