How to simulate Phoenix LiveView in a Flutter mobile application?

There’s a Dart package for interacting with Phoenix Channels:

I haven’t used it but it looks to be under active development.

There’s also a tutorial on GitHub showing how to put the pieces together:

https://github.com/dwyl/flutter-phoenix-channels-demo

Again, I haven’t done this tutorial, but I found the dwyl tutorials on GitHub to be very good when I was learning Phoenix.

Also, when I did go down this road, I did embed webviews into a Flutter app. The webview content can communicate with the “native” Flutter widgets via JS message passing. So your web stuff can be plain LiveView, and you can still interact with “native” Flutter widgets. Best of both worlds IMO since your web stuff can be reused on your mobile app. I encourage you to take a look at that before you make up your mind. (If you do, I found that this Dart webview package is way better than the official one, which was barely useable when I tried it ~2 years ago.)

That sounds like a fascinating challenge! If you’re aiming for a seamless experience like LiveView in Flutter, have you considered using Flutter’s stream and StreamBuilder? They can handle real-time data efficiently. Plus, integrating Phoenix Channels with Flutter can give you that native feel while keeping everything in sync. Excited to see where this project takes you!

Another option might be LiveView Native… I think it would be theoretically possible to embed both LVN and Flutter in a single app for different parts of it, wherever it makes sense. Of course, LVN is not yet ready, but something to keep an eye on.

I don’t think this has been mentioned yet, but LV does use more than just a phoenix channels client. The client would need to implement an alternative to morphdom and it would need to implement a resolver for the template diffing structure LV uses to send diffs on the wire. Then there’s all the event integrations for clicks, submits, … LiveView Native did invest a lot to make those things work for iOS and android. They do however have a shared library in rust, so they don’t duplicate work between the platforms. Maybe that one could (eventually) be used to power a flutter based approach as well. Though if you can go native why use flutter then I guess.

There is this PoC GitHub - alex-min/live_view_native_flutter_client: A flutter client for LiveView Native · GitHub, Releasing LiveView native with Flutter preview ⋅ Alex-min's tech blog

most likely a bit outdated by now..

In the Flutter Application I will use Firebsase Authentication. Do you think it will be possible to initiate the authentication in Flutter natively and use the Firebase access token inside the webview ?! I mean to send the access token inside the conn of LiveView inside the webview ?

If there is a reason that you can’t just use Postgres, you could probably make it work.

I have wrapped the mix phx.gen.auth generators to work with an external token before. It isn’t super difficult to do.

But it would be way easier if you could just do the auth in Phoenix, and use that auth token to determine which screens should be displayed in the Flutter app.

I need to authenticate the user in order to retrieve his personalized data .. Not just a matter of allowing or preventing access to certain pages.

OK and where is this personalized data stored? In Postgres or Firebase?

I don’t remember if Phoenix has out-of-the-box bearer auth token support, but you can modify the phx.gen.auth generators to support this.

Postgres, will be eventually on AWS Aurora (Postgres based) with all nodes (Phoenix instances) accessing the same DB.

I guess even if I will be using an embedded webview in the smartphone application, I can still initiate the Firebase authentication natively in Flutter and then use the access token in order to initiate the socket connection, which will on Phoenix side, on connect event, look up the UID in PostgreSQL and assigns it to conn.assigns and that’s it.