Public dev meeting / Loando.io / Elements in the chat flow will appear live until they end animating and become static

Reference

• Summary: I am working in a chat-like interface for (yet another) loan calculator app. In this technical document I am exploring an architectural solution that defines how the user will experience the insertion of a chart plotting widget in the chat flow. Normally, insertions in a chat will bring static elements, like a photo from a camera. But this case is different because the chart, once inserted, will start to animate itself until it plots all the necessary columns.

• Audience: Entrepreneurs, technology professionals, CTOs, specialists, generalists.

• Parent project: Loando.io Roger and Marcio.

• Reference meeting: "a06-750 — loando — Making chart to become immutable after progressing is done 3b493036-8506-462c-aae7-0aefc3bd1f27 Friday, January 31⋅7:15 – 8:15pm"
• Participants: Marcio S Galli
• Text Language: en-US
• Tags: Loando.io, Loan Calculator, Loan planning, Loan Financing, Fixed term loan, Educational, Conversational

Architectural design for live elements in a chat and how they are replaced by static elements

Dear flutter devs, 

I am working in an application that is basically a chat-like interface. However, the reason for this chat-like UI is to serve as a self-reporting screen — to help the user to log content and create some story. In this case the story is the user's loan calculation. 

I am trying to achieve a user experience where, depending on a specific user command, a certain widget pops in the chat flow. However, from the user's perspective, it does not appear in its final form. I mean, it's not like a message that is dumped to the window and it's done.  In this case, it's a message that pops up initially in live mode. The actual example is a chart graphic: as the user taps the "render chart" button, the chart widget appears in chat flow and it then starts to render updating at every second with new columns. This rendering situation goes for a few seconds up to the point when the chart plotting is complete. By the way, the actual update cycles are tied to an isolate, a separate piece of code living higher above this widget. That is the basic story. 

Now, what I am trying to achieve is to "lock" that live widget after the rendering reaches the end.

So, from a user experience standpoint, the user would see the updates to the chart going on for a few seconds; and then, when the chart is completed, the chart ends. 

At this final stage, I wanted to replace the widget with an immutable one — somehow it feels like this direction is good because otherwise I would need to maintain logic in the live widget so each one would need to differentiate itself from the others in order to avoid all the charts to animate. If I was to follow this approach, of keeping all them as the live widgets, it seems that I would go in a direction of breaking the elegance of flutter widget structure and top-down efficient building approach. Thus, my thought was to break the basic elegance only when the widget is working/rendering. 

I wonder your opinion, first, if you think this architectural direction is a good thing to do. To have such widget to appear in the flow but depending on higher order conditions the actual final widget gets replaced. 

Second, I wonder how you would go to implement this widget replacement. What I can think of would be to make a Message widget that is stateful, not stateless. And such widget would have an internal state variable like "live" with possible values as false or true. When true, its descendant would bring the dynamic live widget which communicates with the isolate. When false, it would require the actual final chart data and it simply plot a stateless chart at once. 

And finally, if you think that such narrative example would be enough for an article. This is a real app but as I am learning flutter I would not mind doing an effort to bring an article up.

Thank you so much for reading, 

Marcio