How to integrate Flutter with Phoenix?

Phoenix Forum Questions / Help
, ,
1

Hello everyone,
I come from a Java background, and I recently started learning Elixir. I still didn’t look into Phoenix or Flutter, but my idea would be to release a web app that uses these tools in the following months.
I wanted to know if this is possible and also recommended to use Flutter alongside Phoenix. I tried to search on Google how to integrate these two frameworks, but I did not find anything helpful.
Can/should I use Flutter also for the browser version? Or would it be better to implement that with e.g. Vue? PS: the focus goes more on Android and iOS versions, but it should also have good browser support.
Thank you in advance.

3 Likes
2

:wave: Hello and welcome!
You can do the same as you would do on Java world, have controllers that serves json responses forming an API, Phoenix can be agnostic about which view technology you will use be it react, flutter, Vue, jQuery. You can use the same API you end up developing for both mobile and web. You can certainly use flutter with it, AFAIK Flutter web is stable so you can develop for mobile and web with it!

PS: You might find more examples on the web on how to setup Vue and React with Phoenix instead of Flutter because of popular usage, but they follow the same principle.

1 Like
3

I don’t know Flutter but Phoenix can be used only as a backend – if you really want to use any other technology for the frontend.

If Flutter also covers the backend then no, you’d have a very hard trying to make two backend frameworks work together.

4

If You want to use websocket and Phoenix channels, it is important to find a client…

There is one in JS coming with the framework, or from Npm.

There seems to be one for Dart… but have not tried it.

3 Likes
5

You could also use Absinthe to run a GraphQL server with Phoenix and access it with GraphQL-Flutter. If were building a Flutter app right now that’s the route I would go.

4 Likes
6

I used phoenix_wings in a proof of concept Android app some time ago, it’s quite straightforward to implement a channels client in flutter with it, served by a Phoenix backend. I could dig my HD and publish a github repo, even if I’m totally noob with Dart an Flutter, if you’re interested.

P. S. Sorry kokolegorille, I didn’t meen to reply to you, but to the OP

2 Likes
7

Hey. Please can you share your flutter/phoenix repo?

8

Hi @AliaksandrBadretdzin, I’m posting here the two only significative files, Flutter’s main.dart and Phoenix’channel module. All the remaining files are just standard defaults in both projects. The Flutter client connects to a phoenix channel, send a message with no payload, and receive a broadcasted message in return then updates its UI with a purring audio feedback. It was one of my very first silly experiments with Flutter. Hth.

main.dart

import 'package:flutter/material.dart';
import 'package:phoenix_wings/phoenix_wings.dart';
import 'package:audioplayers/audio_cache.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Mimitos!',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(title: 'Mimitos!'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  final socket = PhoenixSocket("ws://192.168.1.106:4000/socket/websocket");
  final AudioCache player = new AudioCache();
  final purrAudioPath = "purr.mp3";
  final faces = ["😫", "😩", "😣", "😔", "😑", "😌", "😊"];

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PhoenixChannel _channel;
  int _happyness;

  void initState() {
    _happyness = 0;
    _connectSocket();
    super.initState();
  }

  Future<void> _connectSocket() async {
    await widget.socket.connect();

    _channel = widget.socket.channel("room:mimitos");
    _channel.on("mimitos!", _incrementHappyness);

    _channel.join();
  }

  void _incrementHappyness(_payload, _ref, _joinRef) {
    widget.player.play(widget.purrAudioPath);

    if (_happyness < 26) {
      setState(() {
        _happyness = _happyness + 1;
      });
    } else {
      setState(() {
        var rng = new Random();
        _happyness = rng.nextInt(10) + 5;
      });
    }
  }

  void _sendMimitos() {
    _channel.push(event: "send_mimitos!", payload: {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
              alignment: Alignment.center,
              color: Colors.deepPurple,
              child: Text(widget.faces[_happyness ~/ 4],
                  style: TextStyle(
                      fontFamily: 'Raleway',
                      fontSize: 156,
                      decoration: TextDecoration.none,
                      color: Colors.white)))),
      floatingActionButton: new FloatingActionButton(
        onPressed: _sendMimitos,
        tooltip: 'Send Mimitos!',
        child: new Icon(Icons.pets),
      ),
    );
  }
}

room_channel.ex

defmodule MimitosServerWeb.RoomChannel do
  use Phoenix.Channel

  def join("room:mimitos", _message, socket) do
    {:ok, socket}
  end

  def join("room:" <> _private_room_id, _params, _socket) do
    {:error, %{reason: "unauthorized"}}
  end

  def handle_in("send_mimitos!", %{}, socket) do
    broadcast!(socket, "mimitos!", %{})
    {:noreply, socket}
  end
end
1 Like
9

hello , I hope you are watching.
There is a line in your flutter dart file written

_channel.on("mimitos!", _incrementHappyness);

currently after updates “_channel.on()” method does not exist
If anyone finds a method that listens to events like "channel.on(event_string)
please share.

10

:thinking: (wrong forum maybe, but hope nobody will notice or complain)

phoenix_wings 1.0.2

https://pub.dev/documentation/phoenix_wings/latest/html/PhoenixChannel/on.html

also checked in the repo, src/phoenix_channel.dart, lines 212…218

  /// Adds a callback which will be triggered on receiving an [event]
  /// with matching name
  int on(String? event, PhoenixMessageCallback callback) {
    final ref = _bindingRef++;
    _bindings.add(new _PhoenixChannelBinding(event, ref, callback));
    return ref;
  }

hth.

11

am using different futter package, let me search more.

12

Sorry guys I was using phoenix_socket flutter package and it has no that "_channel.on() " method.

After trying the * phoenix_wings* package It works for me.
thanks you all.

1 Like
13

That is interesting. I am looking for a way to connect a Flutter application to a Phoenix server for a real-time AI (Chat-GPT) assisted chat. Here is the related issue I have opened on the topic:

What captured my attention when it comes to Absinthe is that it supports subscriptions, which means that under an ongoing chat, user messages will be send to AI, can be stored in DB, and AI responses can also be stored in DB, and with a subscription, the end-user (Flutter application) can be notified of the response recieved from AI.

Is this plausible, you think @MrDoops ?