danielepoterti / GreenUpFrontEnd

Frontend used in GreenUp Project
1 stars 0 forks source link

Bottom Navigation Bar e interfaccia in generale #3

Open danielepoterti opened 3 years ago

danielepoterti commented 3 years ago

Dobbiamo scegliere una Bottom Navigation bar.

Su pub.dev sono presenti diversi plug-in. Anche su YouTube.

Possiamo anche eventualmente anche scegliere un tema prefatto e usare quello (alla wordpress), anche se come opzione, sincero, mi fa @cagare.

@the-wood-boop cerchi tu e ci proponi?

boscodavide commented 3 years ago

Ho guardato le prime 4 pagine, aperto tutte le schermate di tutti i samples e i migliori in assoluto sono questi:

Moderno e con le scritte oltre che il simbolo della funzione: https://pub.dev/packages/bubbled_navigation_bar

Senza scritte, molto pulito e moderno rispetto alle app meccaniche che si usano tutti i giorni: https://pub.dev/packages/curved_navigation_bar

Io mi ero studiato le basi del material e una regola importante è che l'utente capisca subito a cosa servono le funzioni che va a schiacciare, tramite l'utilizzo di simboli efficaci e diretti. Quindi probabilmente il secondo widget è il migliore, con dei simboli molto esplicativi.

danielepoterti commented 3 years ago

Io mi ero studiato le basi del material e una regola importante è che l'utente capisca subito a cosa servono le funzioni che va a schiacciare, tramite l'utilizzo di simboli efficaci e diretti. Quindi probabilmente il secondo widget è il migliore, con dei simboli molto esplicativi.

Hai guardato se su YouTube c'è qualcosa di interessante?

Io ho trovato questo drawer 3d che mi fa impazzire come concetto...

boscodavide commented 3 years ago

Ho guardato il video ed è molto figo. Il problema principalmente è che così in ottica incrementale poi non riesci a dare le funzioni in modo subito fruibile dall'utente. Mi spiego meglio. Appena mettiamo funzioni come "controlla lo stato della ricarica" oppure "cronologia ricariche" oppure "le mie carte", ossia funzioni che devono essere subito disponibili sulla schermata, non vorrei che vada in conflitto la down bar con questa "slide geometrica" (come se si spostasse sul lato di un cubo). Questo è molto bello se non ci fosse la downbar. Adesso me la ragiono, faccio dei bozzetti e li giro cosi ci riflettiamo.

Riguardando il mio commento di ieri, riquoto sul fatto che la downbar migliore sia questa: https://pub.dev/packages/curved_navigation_bar

danielepoterti commented 3 years ago

Ho guardato il video ed è molto figo. Il problema principalmente è che così in ottica incrementale poi non riesci a dare le funzioni in modo subito fruibile dall'utente. Mi spiego meglio. Appena mettiamo funzioni come "controlla lo stato della ricarica" oppure "cronologia ricariche" oppure "le mie carte", ossia funzioni che devono essere subito disponibili sulla schermata, non vorrei che vada in conflitto la down bar con questa "slide geometrica" (come se si spostasse sul lato di un cubo). Questo è molto bello se non ci fosse la downbar. Adesso me la ragiono, faccio dei bozzetti e li giro cosi ci riflettiamo.

Ovviamente o la downbar o il drawer come in video.

Riguardando il mio commento di ieri, riquoto sul fatto che la downbar migliore sia questa: https://pub.dev/packages/curved_navigation_bar

okay ma non vorrei implementare questo in modo affrettato e poi magari non è la soluzione ottimale.

boscodavide commented 3 years ago

Se con il codice fosse possibile, sarebbe figo avere entrambi perchè sono molto belli. Make your choice, io ora cerco un po su yt.

michelebanfi commented 3 years ago

Ho provato a dare un'occhiata a quella che suggerivi tu @the-wood-boop, l'ho testata sul mio android che é un po' vecchiotto, ma va veramente bene. Temevo che l'animazione potesse dare problemi di prestazioni, ma sembrerebbe di no, dovremmo peró testarla con delle schermate piú pesanti da renderizzare per averne certezza 👀

boscodavide commented 3 years ago

Ho provato a dare un'occhiata a quella che suggerivi tu @the-wood-boop, l'ho testata sul mio android che é un po' vecchiotto, ma va veramente bene. Temevo che l'animazione potesse dare problemi di prestazioni, ma sembrerebbe di no, dovremmo peró testarla con delle schermate piú pesanti da renderizzare per averne certezza 👀

Adesso continuo bene la mia ricerca su PubDev e youtube. Così vi do più opzioni possibili di qualità. Daje!

boscodavide commented 3 years ago

Terrò aggiornato questo messaggio, a modi lista della spesa.

Sito che utilizzo per le icone nelle UI: https://www.flaticon.com/

Ecco una lista di widget che credo possa aiutarvi nella programmazione:

Google Fonts in flutter: https://pub.dev/packages/google_fonts

Login con i principali social (fase di login): https://pub.dev/packages/auth_buttons (il quarto è il più pulito)

Inserimento numero di telefono (fase di login): https://pub.dev/packages/intl_phone_field

Search bar: https://pub.dev/packages/material_floating_search_bar (la migliore in assoluto; segue le regole del material ed è molto fluida. Tenete conto che la mappa così rimane sempre visibile) https://www.youtube.com/watch?v=FPcl1tu0gDs (Search bar in material, ma ricopre la struttura della mappa) https://pub.dev/packages/suggestion_search_bar (Simile alla prima, ma meno Material) https://pub.dev/packages/anim_search_bar (interessante ma rimane senza l'elenco delle opzioni; è solo la barra) https://pub.dev/packages/search_widget (molto fredda ma funzionale)

Bottom bar: (la migliore) https://pub.dev/packages/curved_navigation_bar

Slide 3d rettangolare di Daniele: https://www.youtube.com/watch?v=ZHRhSFXqHJY

Filter per le tipologie di ricarica, presa,...: https://pub.dev/packages/filter_list

Filter per la potenza: https://pub.dev/packages/cupertino_range_slider

Choose hour(per le prenotare la postazione): https://pub.dev/packages/select_filter https://pub.dev/packages/numberpicker https://pub.dev/packages/time_range_picker

Zoom area per vedere le torrette attorno alla postazione (cambiando il range di visualizzazione della mappa, senza dover cercare per forza sulla barra di ricerca): (Opzionale) https://pub.dev/packages/geoflutterfire

Choose nation: https://pub.dev/packages/country_currency_chooser