ListView with Flutter (Part 2)

This article is the continuation from ListView with Flutter series. On this stage, we will create a ListView consist of words from list as input parameter.

For the basic code on this stage, please refer to Part 1.

Let’s modify our _listItem widget so that it can take String as input parameter and return ListTile with our input as display.

Widget _listItem(String text) {
  return ListTile (
    title: Text(text),
  );
}

Now our body on ListViewApp class will be adjusted to fit our new _listItem widget :

class ListViewApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
       home: Scaffold(
       appBar: AppBar(
          title: Text(‘ListView App’),
       ),
       body: ListView(
          children: <Widget>[
            _listItem('This is tile'),
            _listItem('This is tile'),
            _listItem('This is tile')
          ],
       ),
     ),
  );
 }

Create new widget inside ListViewApp that will return ListView and take List<String> as input parameter :

Widget _listView(List<String> wordList) {
  return ListView.builder(
    itemCount: wordList.length,
      itemBuilder: (BuildContext context, int index) {
        return _listItem(wordList[index]);
      });
}

Replace body on ListViewApp build with our new widget

class ListViewApp extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView App'),
        ),
        body: _listView(entries),
      ),
    );
  }

  Widget _listView(List<String> wordList) {
    return ListView.builder(
      itemCount: wordList.length,
        itemBuilder: (BuildContext context, int index) {
          return _listItem(wordList[index]);
        });
  }

  Widget _listItem(String text) {
    return ListTile (
      title: Text(text),
    );
  }
}

Last step, create constructor on ListViewApp that take List<String> as parameter. Add the desired input on the main function.

void main() {
  final List<String> entries = <String>['A', 'B', 'C', 'D'];

  runApp(ListViewApp(entries));
}

class ListViewApp extends StatelessWidget {
  List<String> entries;

  ListViewApp(List<String> entries) {
    this.entries = entries;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView App'),
        ),
        body: _listView(entries),
      ),
    );
  }

  Widget _listView(List<String> wordList) {
    return ListView.builder(
      itemCount: wordList.length,
        itemBuilder: (BuildContext context, int index) {
          return _listItem(wordList[index]);
        });
  }

  Widget _listItem(String text) {
    return ListTile (
      title: Text(text),
    );
  }
}

Deploy our code into emulator, here is the final look

Reference :
https://api.flutter.dev/flutter/widgets/ListView-class.html