Programmare applicazioni mobili con flutter

[pabloski]

Dice che c'è un mismatch tra i tipi di Flex e SingolaInfo.

Infatti qua si vede https://api.flutter.dev/flutter/widgets/Flexible-class.html

• ParentDataWidget<FlexParentData>

In soldoni, vuole un widget che abbia uno stato, non uno stateless.

 

[hddsfortuna]

Ho tolto il widget Expanded e non mi dà più errore. Però non è esattamente cosa voglio fare.
Togliendo la scritta Prova app e il logo di flutter, nella pagina informazioni voglio fare una cosa tipo questa:

E poi, già che stiamo in argomento, vorrei fare anche una pagina come questa:


Queste cose sono predefinite su android, tra l'altro prese dal cell che uso per provare. Mi danno di libreria material, è impossibile (credo) che con oggetti material già pronti non si possa fare ciò. Purtroppo sono nuovo nel settore e non conosco granché.

Come posso fare queste pagine con material?

Grazie

 

[pabloski]

Eh certo che si possono fare. Ma lì c'è tanta roba. Testi, icone, liste, layout. Hai bisogno di studiare più approfonditamente Flutter, prima di poter fare una cosa del genere.

Quello che chiedi tu, è grosso modo una cosa del genere https://github.com/appditto/natrium_wallet_flutter

A questo punto, puoi procedere studiando Flutter pian piano, approfondendo pure qualche parte teorica, altrimenti non si capisce nemmeno come funziona. Oppure farti un giro su github, tra i progetti opensource, e tirarne fuori qualche idea.

Imho è meglio avere una buona conoscenza del framework, altrimenti si riduce tutto ad un copia-incolla di codice.

 

[hddsfortuna]

Ho provato a scaricare il progetto da te postato e l'analizzatore mi ha dato una marea di errori, per cui ho lasciato perdere.

Premesso che non voglio fare copia-incolla di codice, in quanto è vero che sto seguendo alcuni codelab, ma prima di modificare ogni singola linea di codice, devo capire bene cosa sto facendo. Tra l'altro mi sto anche dilettando con una mia applicazione (di cui ho postato il codice fin'ora scritto), e ogni volta che imparo qualcosa di nuovo dai codelab, vado a modificare la mia app aggiungendo ciò che mi piace.

Per ora ciò che mi serve è fare una pagina di informazioni riguardanti l'app contenente una grafica simile o magari uguale alle impostazioni di android, come la pagina "info sul telefono".

Hai qualcosa di già pronto? Anche tuoi vecchi codici.

Poi, appena finisco di studiare i 4 codelab del commercio elettronico, vorrei qualcosa riguardante l'interazione con un server remoto (per dire remoto, ma è in lan).

Grazie

 

[pabloski]

Avevo postato quel codice giusto per dargli un'occhiata. Prova a compilarlo sarebbe un'impresa, viste le dipendenze che ha. Comunque tieni presente che su github si trova di tutto e di più.

Riguardo il tuo caso, a te serve specificamente questo https://pusher.com/tutorials/flutter-listviews

 

[hddsfortuna]

Ho letto la guida che mi hai postato e ho trovato interessante la sezione "ListTile customization".
Mi piace fare una lista con icona sulla sinistra, testo ed eventualmente freccia destra.

Il fatto è che vorrei mettere del testo grigio sotto quello nero, come nella prima immagine al post #32.
Vorrei sapere se c'è qualcosa della libreria material già pronta per fare ciò, altrimenti devo procedere con column e due text. Credo di aver imparato a farlo, ma vorrei farlo esattamente come le impostazioni di android, per questo vorrei la stessa cosa usata nelle impostazioni.

Grazie

 

[pabloski]

No no, è ListTile tutto quello che ti serve https://api.flutter.dev/flutter/material/ListTile-class.html

Perchè usare due text, le column, ecc...? ListTile è fatta apposta per seguire le guidelines del material design. E supporta titolo e sottotitolo, icone a sinistra e a destra del testo e i colori si possono cambiare manipolando l'elemento Text.

Il nocciolo della questione è che tutti i widget sono componibili. Cioè puoi arbitrariamente inserire un widget in un altro widget. Vedi l'elemento Text. E queste permette di realizzare widget complessi velocemente, riutilizzando quelli preesistenti.

 

[hddsfortuna]

Dato che sono ancora agli inizi, potresti farmi tu esempi di codice per queste cose? (sempre riguardanti le immagini del post #32)

1. l'elemento grigio con la scritta "debug" o "dispositivo" o "personale"
2. l'elemento "debug usb" con il titolo, sottotitolo e magari il checkbox (almeno il html si chiama così)

Sarei capace pure io di farlo, ma non vorrei impastare codice inutile, quando penso con material si può fare veloce e con poco codice.
Ho trovato questa guida, ma non c'è il codice.

Grazie

 

[pabloski]

Dato che sono ancora agli inizi, potresti farmi tu esempi di codice per queste cose? (sempre riguardanti le immagini del post #32)

1. l'elemento grigio con la scritta "debug" o "dispositivo" o "personale"
2. l'elemento "debug usb" con il titolo, sottotitolo e magari il checkbox (almeno il html si chiama così)

Sarei capace pure io di farlo, ma non vorrei impastare codice inutile, quando penso con material si può fare veloce e con poco codice.
Ho trovato questa guida, ma non c'è il codice.

Grazie

Esercitarsi è l'elemento vitale per imparare. Non ci guadagni niente se lo faccio io. Inoltre ci sono pezzi di codice molto chiari in quei tutorial che ho postato.

Basta cambiare un paio di settaggi del widget ListTile ( che oltretutto fa parte dei widget material ).

Per cambiare il colore del testo, come dicevo, si agisce sull'oggetto Text

Text(
  'Blahblahblah',
  style: TextStyle(
    color: Colors.blue,
  ),
)

Non vedo nulla di difficile. L'importante è dare un'occhiata alla documentazione sulle classi.

 

[hddsfortuna]

Ho provato a fare qualcosa con ListTile e devo dire che era proprio quello che volevo, grazie per il consiglio :ok:

Però c'è un intoppo, come puoi vedere in questo video registrato dall'emulatore, lo scorrimento riguarda solo ciò che ho messo in Flexible, ma io voglio far scorrere l'intera pagina (tranne la barra).
Ho usato questo codice:

List<SingolaInformazione> listaInformazioni = [
  SingolaInformazione(nome: 'Versione App', valore: '1.0.0'),
  SingolaInformazione(nome: 'Rilascio App', valore: '1/7/20'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
  SingolaInformazione(nome: 'Testo prova', valore: 'Testo sotto'),
];

class SingolaInformazione extends StatelessWidget {
  SingolaInformazione({this.nome, this.valore});
  final String nome;
  final String valore;

  @override
  Widget build(BuildContext context) => Column(
        children: <Widget>[
          ListTile(
            //leading: Icon(Icons.directions_run),
            title: Text(nome),
            subtitle: Text(valore),
            //trailing: Icon(Icons.more_vert),
            //isThreeLine: true,
          ),
          Divider(height: 1.0),
        ],
      );
}

// questa è la route
class PagInformazioniApplicazione extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(testi['paginfoapptit']),
          elevation:
              Theme.of(context).platform == TargetPlatform.iOS ? 0.0 : 4.0,
        ),
        body: Container(
          decoration: lineaGrigiaSuperiore(context),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(applicazione['nome']),
              Image(
                image: AssetImage('immagini/logo-flutter.png'),
              ),
              SizedBox(height: 15.0),
              Flexible(
                child: ListView.builder(
                  itemBuilder: (_, i) => listaInformazioni[i],
                  itemCount: listaInformazioni.length,
                ),
              ),
            ],
          ),
        ),
      );
}

Non voglio usare qui Card(), non mi piace metterlo qui.

Ho provato anche a mettere flexible direttamente a body, o sostituire column con listview, ma ricevo errore.
Non so come fare, eppure la soluzione ci dev'essere e sarà pure facile, ma per ora non sono abbastanza bravo da saperlo fare da solo.

Come posso rimediare?

Grazie

 

[pabloski]

A me sembrano meglio così.

Comunque, faccio notare che Column può essere figlia di Flexible. Per cui dove sta

child: Column(

puoi mettere

child: Flexible(
 child: Column(

 

[hddsfortuna]

Se metto flexible che contiene la column, che metto al posto di flexible dove sta listview? Non penso che posso mettere due flexible uno dentro l'altro.

Grazie

 

[pabloski]

Se metto flexible che contiene la column, che metto al posto di flexible dove sta listview? Non penso che posso mettere due flexible uno dentro l'altro.

Perchè dovresti mettere due flexible? Comunque ho scritto una fesseria sopra. Non è Flexible che fa lo scrolling, ma Scrollview. La ListView scrolla perchè è un widget basato su Scrollview.

Guarda qua, sezione inheritance, https://api.flutter.dev/flutter/widgets/ListView-class.html

A questo punto o inserisci anche l'altro contenuto nella listview, oppure agisci sul container e fai in modo che vada in overflow verso il basso. La proprietà physics della listview va posta a NeverScrollableScrollPhysics().

In sostanza il contenuto va fuori schermo, il container si estende fuori schermo e lo scrolling si applica a questo. Ma vai a forzare troppo il funzionamento di quei widget.

Fai prima ad aggiungere il contenuto in testa come primo elemento della lista.

 

[hddsfortuna]

Ho letto la documentazione e ho pensato di sostituire listview.builder con separated, e quindi togliendo column e divider dall'oggetto che viene ripetuto.

Ma non ho ancora capito come fare, perché voglio mettere listview direttamente a body, ma come faccio con oggetti che ho scelto io (testo e immagine) insieme ad oggetti a ripetizione?

Grazie

 

[pabloski]

E' spiegato sempre qui https://pusher.com/tutorials/flutter-listviews

nella sezione "Adding and deleting rows in a ListView"

Il bello di Flutter è che si può mischiare codice Dart nel bel mezzo delle definizioni della GUI.

Del resto già c'è tutto quello che serve

itemBuilder: (_, i) => listaInformazioni[i]

questa cosa qui non è altro che una funzione anonima, che prende l'indice i come input e ritorna l'elemento i-esimo di listaInformazioni.

Ma nessuno t'impedisce di metterci una funzione più complessa, che prende i dati da un database o li genera in un ciclo for.