Thursday, November 29, 2018

ListViews in Flutter:

Dart provides a ListView widget that will let you show the data in a list. ListView acts like a RecyclerView on Android and a UITableView on iOS, recycling views as the user scrolls through the list to achieve smooth scrolling performance.

To build a list view, we need to provide raw builder like the below

  body: new ListView.builder(
  padding: const EdgeInsets.all(16.0),
  itemCount: _members.length,
  itemBuilder: (BuildContext context, int position) {
    return _buildRow(position);
  }),

_buildRow method returns an item builder which is like this below

Widget _buildRow(int i) {
  return new ListTile(
    title: new Text("${_members[i]["login"]}", style: _biggerFont)
  );
}

Adding divider is funny, which is like the below

body: new ListView.builder(
  itemCount: _members.length * 2,
  itemBuilder: (BuildContext context, int position) {
    if (position.isOdd) return new Divider();

    final index = position ~/ 2;

    return _buildRow(index);
  }),


The above is passing string list type. Now it is easy to pass int he customer types as well. Which is like below

Suppose _members array is now array of Member,

Widget _buildRow(int i) {
  return new ListTile(
    title: new Text("${_members[I].key}", style: _biggerFont)
  );
}

The member object can be something like below

class Member {

Final String login;
Member(this.login){

}

}

At the time of processing the response, below can be done to create the Member array.

setState((){
Var members  = JSON.decode(response.body);
for(var memberObj in members)}{
Final newMember = new Member(memberObj["login"])
_members.add(newMember);
}

});



References:
https://www.raywenderlich.com/116-getting-started-with-flutter

No comments:

Post a Comment