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:
Top comments (0)