Flutter: costruire una ListView con dati casuali

In questo articolo vedremo come costruire una ListView popolata con dati casuali generati utilizzando il package "faker".

Il widget ListView 

Inizializiamo un nuovo progetto e sostituiamo il codice standard nel file main.dart con questo.

import 'package:flutter/material.dart';

import 'pages/listviewpage.dart';

void main() {

  runApp(const ListViewApp());

}

class ListViewApp extends StatelessWidget {

  const ListViewApp({Key? key}) : super(key: key);

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Listview Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: const ListViewPage(title: 'Flutter Listview Demo'),

    );

  }

}

Creiamo quindi una sottocartella pages in cui potremmo mettere tutte le pagine del nostro progetto e dentro questa, il file listviewpage.dart con il seguente codice:

import 'package:flutter/material.dart';

import 'package:faker/faker.dart';

import './listitems.dart';

import '../models/item.dart';

class ListViewPage extends StatelessWidget {

  const ListViewPage({Key? key, required this.title}) : super(key: key);

  final String title;

  _buildTestData() {

    List<Item> itemTestData = [];

    var faker = Faker();

    for (int i = 0; i < 20; i++) {

      itemTestData.add(Item(

          firstName: faker.person.firstName(),

          lastName: faker.person.lastName(),

          email: faker.internet.email()));

    }

    return itemTestData;

  }

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        //5

        home: Scaffold(

      //6

      appBar: AppBar(

        title: Text(title),

      ),

      body: ListItems(itemsList: _buildTestData()),

    ));

  }

}

Utilizzando il pacchetto faker creiamo un array di 20 oggetti definiti dalla classe Item. Per un esempio completo di utilizzo, vi consiglio di leggere la documentazione del pacchetto. Per faker occorre aggiungere la corretta dipendenza nel file pubspec.yaml presente nel progetto, facendo attenzione alla corretta indentazione della riga: (deve trovarsi allo stesso livello di flutter_test). 

dev_dependencies:

  flutter_test:

    sdk: flutter

  faker: ^2.0.0

Salvando il file verrà effettuato un aggiornamento automatico delle dipendenze, ma se dovesse servire lanciarlo a mano, dal terminale è sufficiente il seguente comando

 flutter pub get

Creiamo una sottocartella model e dentro questo file item.dart con la classe Item che descrive gli elementi rappresentati nella ListView:

class Item {

  final String firstName;

  final String lastName;

  final String email;

  const Item(

      {required this.firstName, required this.lastName, required this.email});

}

Ogni elemento avrà tre attributi, firstName, lastName e email. 

Creiamo una sottocartella components e dentro questo file carditem.dart con il widget utilizzato per visualizzare ogni elemento nella ListView:

import 'package:flutter/material.dart';

import '../models/item.dart';

class CardItem extends StatelessWidget {

  const CardItem({Key? key, required this.item}) : super(key: key);

  final Item item;

  @override

  Widget build(BuildContext context) {

    return ListTile(

        leading: CircleAvatar(

          backgroundColor: Colors.green,

          child: Text(item.firstName[0] + item.lastName[0]),

        ),

        title: Text("${item.firstName} ${item.lastName}"),

        subtitle: Text(item.email));

  }

}

Ogni elemento avrà un aspetto simile a questo, con un titolo e un sottotitolo:

Nella stessa cartella pages, creiamo un nuovo file listitems.dart ed inseriamo questo codice:

import 'package:flutter/material.dart';

import '../models/item.dart';

import '../components/carditem.dart';

class ListItems extends StatelessWidget {

  const ListItems({Key? key, required this.itemsList}) : super(key: key);

  final List<Item> itemsList;

  @override

  Widget build(BuildContext context) {

    return ListView(

      padding: const EdgeInsets.symmetric(vertical: 8.0),

      children: _buildList(),

    );

  }

  List<CardItem> _buildList() {

    return itemsList.map((item) => CardItem(item: item)).toList();

  }

}

Questa pagina si occuperà di visualizzare il widget ListView utilizzando una lista di oggetti che passeremo al suo costruttore. Con l'istruzione .map applicata alla lista di oggetti, otteniamo un widget CardItem per ogni elemento della lista.

Se lanciamo l'applicazione nell' emulatore dovremmo ottenere una schermata simile a questa:

L'applicazione è completa. Nei prossimi articoli magari torneremo su questo progetto, per introdurre altri elementi di base.

Come per gli articoli precedenti potete trovare questo codice tra le mie repo GitHub: https://github.com/luigimicco/flutter_listview