App base code - layout e parti interattive - Home

Questo articolo, come gli altri nella sezione Appunti sulla documentazione ufficiale di Flutter, è un breve appunto scritto durante lo studio della documentazione ufficiale di Flutter. Per approfondire i concetti, è utile leggere la documentazione ufficiale.

---

In particolare questo esempio tratta la parte che contiene i due esempi di griglie (un esempio è a sinistra e l’altro è a destra). L’esempio più interessante è quello a destra (immagini con testi e trasparenza) ma l’URL al codice di esempio a destra è rotto; anche se è possibile raggiungerlo nella Flutter gallery, ho preferito rifare la funzionalità seguendo questo cookbook sul widget GridList in modo da approfondire meglio l’argomento.

Nome progetto: flutter_tutorial_home

Partendo dall’applicazione standard creata automaticamente quando creiamo un nuovo progetto Android Studio, aggiungiamo questa funzione per navigare verso la SecondRoute (che creiamo più avanti) nella classe State (class _MyHomePageState extends State)

  void _navigateToHome() async {
    setState(() {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondRoute()),
      );
    });
  }

Adesso questo al posto dello Scaffold() nel build() di class _MyHomePageState extends State {

    const title = 'Grid List';

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child:  GestureDetector(
                    onTap: () {print('Item $index');},
                    child: ClipRRect(
                      child: Image.asset('images/lake.jpg'),
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 8),
                  child: Text(
                    'Item $index',
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w400
                    ),
                  ),
                ),
              ],
            );
          }),
        ),
      ),
    );

La parte interessante è la seguente che crea la lista di immagini e testi.

GridView.count(
  // Create a grid with 2 columns. If you change the scrollDirection to
  // horizontal, this produces 2 rows.
  crossAxisCount: 2,
  // Generate 100 widgets that display their index in the List.
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
);

Ma i dati vengono generati con List.generate(), mentre la maggior parte delle volte noi vorremo creare una lista a partire da un oggetto che contiene le righe da mostrare.

ListView.builder( //# row - questo mette i valori del builder su ogni riga mentre GridView crea dei box
itemCount: excerptclms.length,
padding: EdgeInsets.all(16.0),
itemBuilder: (context, index) {

Al posto del ListView possiamo utilizzare GridView per creare una lista di box. Il numero degli elementi su ogni riga è crossAxixCount mentre crossAxisSpacing e mainAxisSpacing è lo spazio fra un box e l’altro.

GridView.builder(
itemCount: excerptclms.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
),
padding: EdgeInsets.all(16.0),
itemBuilder: (context, index) {

Per rendere gli item cliccabili, è possibile inserire GestureDetector() all’interno di itemBuilder.

itemBuilder: (context, index) {
int _index = index + 1;
return GestureDetector(
onTap: () {
if(excerptclms[index] == risultatogiusto){
_showDialog(context, 'Ottimo!');
}else{
_showDialog(context, 'Riprova!');
}
},
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color(int.parse(buttonColor)),
borderRadius: BorderRadius.circular(8.0),
),
child: Center(
child: Text(excerptclms[index].toString(), style: TextStyle(fontSize: 20, color: Color(int.parse(buttonTextColor))))
),
),
);

Adesso in fondo al codice di main.dart aggiungiamo la classe SecondRoute() della quale parlavamo all’inizio e alla quale puntiamo dal _navigateToHome().

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
             Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Miglioriamo le parti Interattive

Introduzione teorica

Qui la documentazione di Flutter, spiega come modificare l’app appena creata per farla reagire diversamente ad un’azione specifica dell’utente (il tap su un’immagine). Gli stati verrano trattati meglio in un altro articolo. Facendo tap su un’immagine viene stampato l’indice nella console grazie al codice che segue:

  child:  GestureDetector(
    onTap: () {print('Item $index');},
    child: ClipRRect(
      child: Image.asset('images/lake.jpg'),
    ),

Stampare l’indice dell’immagine cliccata è comportamento molto semplice ma molto potente, in quanto l’indice, che adesso viene solo stampato nella console, può essere passato ad una scheda che varia proprio in base all’indice.

Navigare dalla home ad una scheda di dettaglio

Per approfondire la parte di navigazione, ci si può riferire all’articolo sulla copertina ma intanto possiamo modificare la riga:

onTap: () {print('Item $index');},

in questo modo:

onTap: () {_navigateToHome();},

per richiamare _navigateToHome() e navigare verso la SecondRoute() che costruiremo nel prossimo articolo.