CODEWITHSUNDEEP
flutter
Jag99
Jag99

Reputation: 754

Queries on Flutter ListView

Im learning about listviews and I have the below two dart files, one using ListView builder and the other Listview. Both output the same result. I have been following the listview guide: https://pusher.com/tutorials/flutter-listviews

Below are my queries on listview:

  1. I understand in the real world the data will be coming from an API and wanted to know which of the below options will be used and why?
  2. Am i correct to understand that any widget like container, text can be child of within a listView?
  3. In option 1 the ListView child is a function _buildListItemsFromLocation(). Is this a good practise or should we move the _buildListItemsFromLocation()code to a separate dart file?

Option1: 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(),
    );
  }
}

Option 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),
                )
              ],
            );
        }
        );
      }
  }

Upvotes: 0

Views: 250

Answers (2)

Souvenir
Souvenir

Reputation: 108

  1. I use method 2 because it is easy to understand and follows the order from top to bottom so it is easy to read the code.
  2. Any widget can be a child of another widget. Depending on how and what you use them for.
  3. Many people say that we should create another class and then call it again rather than split as above because it affects the performance of the app. In case of using a lot but only in one screen, you can use the same method as your own. The answer may be flawed, have nothing to give yourself.

Upvotes: 2

Autocrab
Autocrab

Reputation: 3747

  1. If you don't know in advance list size, then create it through builder

1.1 If you create list and you know that elements count won't be more than ten or twelve, you can create ListView from example1

  1. Any widget can be in ListView. For convenience there is widget called ListTile, which contains leading, trailing, title, subtitle widgets
  2. its's ok

Upvotes: 1

Related Questions