0

I am trying to integrate a flutter web app into a Nextjs webpage. I have seen this question but it is not working. I also want to be able to pass a user id or string to the flutter app.

I saw that I can use an Iframe but I don't think that's the best way.

I hope you can help me! Thanks in advance.

Joaquín Varela
  • 329
  • 5
  • 18
  • Please provide several more useful information like code or some solution you already tried bot not work as you need. – ImBIOS May 03 '22 at 13:15

1 Answers1

0

The question you mention above (https://stackoverflow.com/a/70935986) is not working. In the case of React, it does. But, Next.js? Won't. Why? Because Next.js renders twice for client-side and server-side.

So, put your flutter app build inside /public folder. And inside route components on load event, load that application with the below code.

    function loadMainDartJs() {
        var scriptTag = document.createElement('script');
        scriptTag.src = './main.dart.js';
        scriptTag.type = 'application/javascript';
        document.getElementById('flutterPreview').append(scriptTag);
    }

    // Should be called on load of client-side render
    if (typeof window !== "undefined") loadMainDartJs();

Another good reference to read: https://github.com/vercel/next.js/issues/5354#issuecomment-520305040

ImBIOS
  • 630
  • 1
  • 9
  • 24
  • And what about passing information between the two? – Joaquín Varela Apr 29 '22 at 01:56
  • "Give a shot to postMessage. This API lets you send "message" events from your parent page to your child page (and vice-versa!). Inside your Flutter app, you just setup a global "message" listener with dart:html, and you handle the events however you want. In your Web app, you can postMessages into your child iframe directly. (Look at the Security Considerations in the article I linked to ensure that only you can postMessage to your own iframe.)" ditman said in [here](https://stackoverflow.com/questions/68449229/how-to-embed-flutter-web-app-into-website-and-send-data-through-website-to-flutt) – ImBIOS Apr 30 '22 at 00:26
  • Hi ImBIOS, could you please elaborate your answer a little more? My users log in using the react web site: mysite.com/auth and once logged in, I want to take them to the Flutter web app in mysite.com/profile and I want to pass the authentication data to Flutter. – aytunch Apr 23 '23 at 16:47