Flutter basic list

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.