ListView with Flutter (Part 1)

Flutter is the new Google mobile UI framework to create native mobile application for Android, iOS from single code base. The code itself, consist of building widget from Flutter library. Because of this, Flutter popularity has been on the rise lately.

On this series, I will try to documented how to create ListView with Flutter.

It will be build in 3 stages:
1. ListView that show a list of same words
2. ListView that show list of words from Array
3. ListView that show list of item consist of Icon and words

If you have a basic programming with other language before, then we are in the same page. A little introduction about Flutter here, should be able to help you to familiarize with Flutter.

Lets started with stage 1. Create new Flutter application in our IDE.
On main.dart, create the app build with this code :

void main() {
  runApp(MaterialApp());
}

If we deploy this in our emulator, it will not showing anything yet. But our emulator will work.
Lets add app bar and empty body container to our app :

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('ListView App'),
      ),
      body: Container(),
    ),
  ));
}

Last step let’s replace body container with ListView library

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('ListView App'),
      ),
      body: ListView(),
    ),
  ));
}

Our ListView are still empty, that is why the look of our app seems no different from the previous code. We can add ListView children using ListTile library:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('ListView App'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(title: Text('This is tile'),),
          ListTile(title: Text('This is tile'),),
          ListTile(title: Text('This is tile'),),
        ],
      ),
    ),
  ));
}

For neat organization, we can rearrange the whole app body into separate class :

void main() {
  runApp(ListViewApp());
}

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

  Widget _listItem() {
    return ListTile (
      title: Text('This is tile'),
    );
  }
}

When we deploy the final above code, it will show a simple list view

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