In this tutorial we will discuss flutter listviews. On upcoming tutorial we will discuss dynamic listviews,custom listviews etc. But here we will try to implement a basic listview in flutter. If you are a beginner in flutter i would recommend you to learn basics of flutter. You can refer the tutorials in Flutter category .
Now let us start implementing the listview. All you need to do is to add the following code in your dart file widget.
body: ListView( children: <Widget>[ ListTile( title: Text('Android'), ), ListTile( title: Text('ios'), ), ListTile( title: Text('dart'), ), ListTile( title: Text('java'), ), ], ),
Following will be the full code of your main.dart file.It will display a listview with a text in each list item.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter List', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(title: 'Basic List'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override ListExample createState() => ListExample(); } class ListExample extends State<MyHomePage>{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("Flutter List"), ), body: ListView( children: <Widget>[ ListTile( title: Text('Android'), ), ListTile( title: Text('ios'), ), ListTile( title: Text('dart'), ), ListTile( title: Text('java'), ), ], ), ); } }
After implementing the code and run the project you will get the following output.
Adding icons
Suppose if you have a requirement of having an icon with the text in each list item you can use the following code.
body: ListView( children: <Widget>[ ListTile( leading: Icon(Icons.android), title: Text('Android'), ), ListTile( leading: Icon(Icons.arrow_back_ios), title: Text('ios'), ), ListTile( leading: Icon(Icons.date_range), title: Text('dart'), ), ListTile( leading: Icon(Icons.ac_unit), title: Text('java'), ), ], ),
And the full code will become like follows
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter List', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(title: 'Basic List'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override ListExample createState() => ListExample(); } class ListExample extends State<MyHomePage>{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("Flutter List"), ), body: ListView( children: <Widget>[ ListTile( leading: Icon(Icons.android), title: Text('Android'), ), ListTile( leading: Icon(Icons.arrow_back_ios), title: Text('ios'), ), ListTile( leading: Icon(Icons.date_range), title: Text('dart'), ), ListTile( leading: Icon(Icons.ac_unit), title: Text('java'), ), ], ), ); } }
Which will give you following output.