Hi, I was trying to improve my app.
It is an app meant for restaurants and this is the screen that displays the tables and their state ( free/ reserved/ waiting for waiter etc).
At the moment this is what it looks like, I used a list.
All the data are read from a Real-time DB, the number of tables can be chosen by the user and so it’s different from case to case.
Using a list to display all the data is functional since it adapts to the number of elements but, it is not exactly a pleasure for the eyes.
I would like to have something like this (below) to display the data but I don’t know if it’s possible to have it and if it will grant me the same flexibility of the list.
Do you have any suggestions?
Which instruments could I use?
Moreover, as you can see, each square contains more than just an info (always taken from the DB):
-State of the sable
-Red or green point
-Number of the table
Does exist a component to design custom elements?
Ciao,
suppongo sia italiano !
Mi verrebbe in mente di fare lo schermo verticale, mettere un container colonna scrollabile, all’interno ci sono un numero sufficiente di container riga. Dentro ogni container riga metti 3 button (un button un tavolo). Ogni button ha immagine diversa a seconda dello stato del tavolo che cambi col metodo del button stesso. Non credo sia malvagia come struttura. Se vuoi farlo interattivo metti un timer che ogni n secondi verifica il database e riscarica la lista dello status dei tavoli e una procedura ti riassegna le immagini ai pulsanti a seconda dello stato
il pulsante si puo’ anche aggiungere in runtime con anyobject… ma la vedo molto piu complicata
ciao
I made custom cards and linked 6 pieces of info to each card. This could be updated after a button press, timer, or via the variable listener methods eith RealtimeDB
You’ll end up using multiple components to make a model of what each should look like.
For styling Set all nested row/columns to fill container.
Set outer column to fit contents for height and width.
set the outer column corner radius to 20
Set the shadow for the putter column.
Now style the font size for the labels
Now use absolute positioning to place them exactly where you want.
Be sure to use your phone for this past part. This won’t appear correctly on the live preview on a computer.
ciao @wikilinks.infooleua0
beh ovviamente se il telefono e’ collegato 3g/4g/lte/5g ecc… hai questo piccolo difetto!! Pero’ se la pensi bene puoi far si che il telefono trasmetta solamente un flag che indichi che ci sono degli update: server e telefono si scambiano solamente pochissimi dati se non ci sono update rilevanti. Come uno dei due ha una prenotazione allora il flag diventa imperativo “SCARICA!!” e giu dati…
Magari non conoscendo a fondo il progetto l’ho pensata troppo facile ! buon lavoro!!
It just takes a while to create the layout every time,
I’m using the clone function, so I read every time how many tables there are and clone the squares until they display all the tables.
!
