Skip to content

Create an example flutter project within the example folder of this package

Problem to solve

We need an example to prove the newly created package is working as intended. Also it would give other users a heads up on howto write their own code.

Use-cases

  • Example for others
  • Nice small test library for bugs and features
  • Proof-of-concept

Proposal

Have a look at the designs attached to this issue.

Prerequisites

Make sure the README.md describes howto clone this repository and howto setup a Twilio account with the appropriate API keys to get started. Also document where to place this API key to get started.

Screen 01

Basic start screen where an user should be able to enter a room name, if the room does not exists it will be created. If the room exists a user joins that room.

Screen 02

  • When you are the first user in the room. Your own cam should be the full screen camera.
  • When a second user joins the publisher own camera should be overlayed and the other participant camera should be the full screen camera
  • On the bottom you will see 5 buttons which overlays the camera, being (from left to right):
    • Enable/Disable videocamera
    • Enable/Disable microphone
    • Hangup (leave room)
    • Switch camera to back camera
    • More menu icon
  • The bottom button bar disappears automatically after X seconds and re-appears after touching the screen

Screen 03

This screen shows how the design will look with the button bar hided. You will notice that your own publisher cam moves more downwards. When the screen is pressed and the button bar shows again the publisher cam is moved upwards.

Screen 04

Shows the 3 participant view.
Divide screen into 2 equal blocks. 1 block is than equally split into 2, creating 3 participants

Screen 05

Shows the 4 participant view.
Equally divide screen into 4 participants.

Screen 06

Shows the 5 participant view.
Bottom participant should get a height that displays the participant well.
Other 4 participants should equally be divided in the remaining space.

Screen 07

Shows the 6 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_08.jpg). And be divided into 2 cols.
Other 4 participants should equally be divided in the remaining space.

Screen 08

Shows the 7 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 3 cols.
Other 4 participants should equally be divided in the remaining space.

Screen 09

Shows the 8 participant view.
Equally divide screen into 8 participants.

Screen 10

Shows the 9 and 10 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 3 cols for 9 participants and 4 cols for 10 participants.
Other 6 participants should equally be divided in the remaining space.

Screen 11

Shows the 11 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 2 cols.
Other 9 participants should equally be divided in the remaining space.

Screen 12

Shows the 12 participant view.
Equally divide screen into 12 participants.

Screen 13

Shows the 13 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 4 cols.
Other 9 participants should equally be divided in the remaining space.

Screen 14

Shows the 14 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 2 cols.
Other 12 participants should equally be divided in the remaining space.

Screen 15

Shows the 15 participant view.
Equally divide screen into 15 participants.

Screen 16

Shows the 16 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 4 cols.
Other 12 participants should equally be divided in the remaining space.

Screen 17

Shows the 17 participant view.
Bottom bar should get a height (same height as https://gitlab.com/twilio-flutter-unofficial/programmable-video-example/issues/1/designs/screen_07.jpg). And be divided into 2 cols.
Other 15 participants should equally be divided in the remaining space.

Screen 18

Shows the 18 participant view.
Equally divide screen into 18 participants.

Screen orientation

All designs are focused on portrait, but landscape should also be possible. The idea would be:

  1. When you turn your device the lay-out stays the same, but only the camera is rotated of the participants
  2. The button bar also remains on the same position, but only the icons are turned

General design

  1. When someone disables his video, display the user initials and make sure the UI reflects that this participant is audio only
  2. When someone disables his audio, make sure to display the participant as video only
  3. When someone disables both video/audio, make sure to reflect this on every side that all is paused

Links/references

Tasks

  • ...
Edited by ..:: Mark Veenstra ::..