Consultas em ListView Flutter

Sep 18 2020

Estou aprendendo sobre listviews e tenho os dois arquivos dart abaixo, um usando o construtor ListView e o outro Listview. Ambos produzem o mesmo resultado. Tenho seguido o guia listview:https://pusher.com/tutorials/flutter-listviews

Abaixo estão minhas perguntas no listview:

  1. Eu entendo que no mundo real os dados virão de uma API e gostaria de saber quais das opções abaixo serão usadas e por quê?
  2. Estou correto em entender que qualquer widget como container, text pode ser filho de dentro de um listView?
  3. Na opção 1, o filho ListView é uma função _buildListItemsFromLocation (). Esta é uma boa prática ou devemos mover o código _buildListItemsFromLocation () para um arquivo DART separado?

Opção1: ListView

class LocationListView extends StatefulWidget {
  @override
  _LocationListViewState createState() => _LocationListViewState();
}

class _LocationListViewState extends State<LocationListView> {

  List<Container> _buildListItemsFromLocation() {
    int index = 0;
    return locationData.map((location) {
      var container = Container(
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.all(10.0),
                child: Image(
                  image: AssetImage(location.imagePath),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Text(location.name),
              )
            ],
          ),
      );
      return container;
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _buildListItemsFromLocation(),
    );
  }
}


Opção 2 - ListView.builder

class LocationList extends StatefulWidget {
  @override
  _LocationListState createState() => _LocationListState();
}

class _LocationListState extends State<LocationList> {

  @override
  Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: locationData.length,
          itemBuilder: (context, index) {
            
            return Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10.0),
                  child: Image(
                    image: AssetImage(locationData[index].imagePath),
                    width: 100.0,
                    height: 100.0,
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  child: Text(locationData[index].name),
                )
              ],
            );
        }
        );
      }
  }


Respostas

2 Souvenir Sep 18 2020 at 09:04
  1. Eu uso o método 2 porque é fácil de entender e segue a ordem de cima para baixo, portanto é fácil de ler o código.
  2. Qualquer widget pode ser filho de outro widget. Dependendo de como e para que você os usa.
  3. Muitas pessoas dizem que devemos criar outra classe e chamá-la novamente, em vez de dividir como acima, porque isso afeta o desempenho do aplicativo. No caso de usar muito, mas apenas em uma tela, você pode usar o mesmo método que o seu. A resposta pode ser falha, não tenha nada para se dar.
1 Autocrab Sep 18 2020 at 09:01
  1. Se você não sabe com antecedência o tamanho da lista, crie-a por meio do construtor

1.1 Se você criar uma lista e souber que a contagem de elementos não será mais do que dez ou doze, você pode criar a ListViewpartir do exemplo 1

  1. Qualquer widget pode estar em ListView. Por conveniência, há um widget chamado ListTile, que contém widgets de início, fim, título e subtítulo
  2. está tudo bem