Thanks to @eoinparkinson who suggested this as an idea for a tutorial
User Interface.
The UI for this app is very simple. The OutputColumn
is initially empty, with vertical alignment set to flex end. This is eventually where all the chat bubble will go.
Under that is the inputRow
which is used to place the test input and the send button side-by-side.
Finally, outside all of this, are two labels; RightLabel
and LeftLabel
. Although I’ve shown them in the screenshot below, their visibility is set to false. It’s this fact that allows new messages to “appear” in the chat as it progresses.
Who’s taking?
Because this is a demo with just a single user, we’ll use a variable called isMe
to mimic who is talking and when.
To expand this example and share it with others would would need to manually keep track of who is talking.
If I’m talking…
The first condition we what to handle is if we are talking. Using the if
block we check if the isMe
variable is true. If it is true then we can clone the right label, using the clone
block. Using the as last in
option will add the new message to the bottom of the chat, which is how most messengers work.
If it’s not me talking …
If we’re not the person talking then it must be someone else. Click on the blue gear icon (the mutator) to add an else
condition to the bottom of our block.
Doing the opposite.
Finally, if someone else is talking then we display the left label instead.
Flipping the isMe
variable and clearing out the TextInput tidies things up for the next message.
Remix this app
If you want to remix this project for yourself, please do by clicking on this link:
https://x.thunkable.com/projectPage/5d2f15e9bab45f13621d3e8d
Thanks!