Simple lists in Flutter

Flutter includes an awesome way to display simple lists. The ListView widget. Everything in Flutter is a widget. Writing text, you need the Text widget, rows and columns you will need a Row or Column widget.

Once you get the concept of widgets in Flutter life becomes easy. www.flutter.dev also boast of great documentation.

The ListView widgets is a standard way to display a list containing few items. The ListView also includes the ListTitle widget that contains properties like leading, title and other properties serving as visual structure to a list of data.

Here is a code sample of a simple list:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyList(),
    ));

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myTitle = "My Contact List";
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
          backgroundColor: Colors.black,
          title: Text(
            myTitle,
            style: TextStyle(
              fontSize: 20.0,
              color: Colors.white,
            ),
          )),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.email,
              size: 30.0,
              color: Colors.white,
            ),
            title: Text(
              'edison@outlook.com',
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.phone,
              size: 30.0,
              color: Colors.white,
            ),
            title: Text(
              "01114567832",
              style: TextStyle(fontSize: 20.0, color: Colors.white),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.map,
              size: 30.0,
              color: Colors.white,
            ),
            title: Text(
              " 1004 estates",
              style: TextStyle(fontSize: 20.0, color: Colors.white),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.apps,
              size: 30.0,
              color: Colors.white,
            ),
            title: Text("My apps",
                style: TextStyle(fontSize: 20.0, color: Colors.white)),
          )
        ],
      ),
    );
  }
}

FInal Result: