Flutter how to use ListTile Threeline

Question

Flutter when I used ListTile ThreeLines, I don't know how to use ThreeLine

    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 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('ddd'),
        ),
        body:Container(
        child: Column(
          children: <Widget>[
            ListTile(
              isThreeLine: true,
              leading: Icon(Icons.event_note),
              title: Text('Title 1'),
              // subtitle: Text('Title2'),
              subtitle: Column(

                children: <Widget>[
                  Text('Titile2'),
                  Text('Title 3'),
                  Text('Title 4'),
                  Text('and so on')
                ],
              ),

            )
          ],
        ),
      ) ,
      ),

    );
  }
}

When i delete isThreeLines, the code is Ok

ListTile

Thanks

Answer 1

As from the docs:

The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true.

It basically means the subtitle of the ListTile is given more space to have text which is more than one line in length:

Answer 2

By default, the ListTile in flutter can display only 2 lines. The Title and the SubTitle. In case there is a third line of text to be displayed, the isThreeLine is set to true and can allow another line to be present. The subtitle will be taking care of giving the 3rd line of text. It is expected that, if the isThreeLine is set to true, the subtitle should be non-null. Anything after "\n" inside subtitle will come in next line

ListTile(
              title: Text("First Line",
              style: TextStyle(fontWeight: FontWeight.bold)),
              subtitle: Text("Second One Text "\nThis is Line Third Text"),
              isThreeLine: true,
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  GestureDetector(
                    child: Icon(Icons.delete,color: Colors.red,),
                    onTap: () {
                    },
                  ),
                ],
              ),
              onTap: (){},
            )