ListView with Flutter (Part 3)

This article is the continuation from ListView with Flutter series. On this part, we will modify the ListView furtherr with icon and text input. The input will be an array input. Basic code for this part will be taken from Part 2.

From part 2, we already have _listItem widget which can display text. Lets modify it so that it will be able to display icon and text.

Widget _listItem(String text, IconData icon) {
    return Row(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Icon(
            icon,
            size: 60,
          ),
        ),
        Center(
          child: Text(
            text,
            style: TextStyle(fontSize: 24),
          ),
        ),
      ],
    );
  }
}

Now we need to create our own ListView widget which will take array of text and icon as input, and display it using our _listItem widget.

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

We have our _listView widget ready now. Before we replace the widget build body with our new _listView widget. Let’s create input for this app inside our main code.

void main() {
  final List<String> entries = <String>['A', 'B', 'C', 'D'];
  final List<IconData> iconList = <IconData>[
    Icons.alarm,
    Icons.alarm,
    Icons.add_circle,
    Icons.calendar_today
  ];

  runApp(ListViewApp(entries, iconList));
}

class ListViewApp extends StatelessWidget {
  List<String> entries;
  List<IconData> iconList;

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

The last step, we need to replace widget build body with our _listView with our array input there.

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

Run the app on the emulator. If everything is correct, this should be the screenshot.