ListTile in Flutter

By Darío Rivera

Posted On in Flutter

In previous articles we have seen List and ListView in Flutter. Two tools that will help us design practically any list. Today we will see a widget to improve the appearance of our list elements which is called ListTile.

To define a ListTile list element, we can use the following structure.

ListTile(
  title: ,
  subtitle: ,
  leading:
  ...
);

The only required property is title, all others are optional. Notice how a set of ListTitle would look like inside a container element.

Next is the code for the previous example.

import 'package:first_layouts/quote.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Home()
  ));
}

class Home extends StatelessWidget {

  List<Template> strings = [
    Template('Child 1'),
    Template('Child 2'),
    Template('Child 3'),
    Template('Child 4'),
    Template('Child 5'),
    Template('Child 6'),
    Template('Child 7'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ListTile example')),
      body: Column(
          children: strings.map((quote) => quote).toList()
      ),
    );
  }
}

class Template extends StatelessWidget {
  final String text;

  Template(this.text);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(this.text),
      leading: Icon(Icons.star_border),
      subtitle: Text('optional subtitle'),
    );
  }
}

Note that we created a Template widget to avoid repeating too much code. We also used .map() which we have already explained in our article List in Flutter. Until next time!

Categories