Home > other >  How to change ListTile Title?? Flutter/Dart
How to change ListTile Title?? Flutter/Dart

Time:10-16

i have a list with 12 items, but instead of 'the list item#$index' Title i want to give the name of each month on the list. How can i do that?

Here is my code and a photo:

ListView _buildListView(BuildContext context){
  List months =
  ['January', 'February', 'March', 'April', 'May','June','July','August','September','October','November','December'];
  int i=0;

    return ListView.builder(itemCount: 12,
    itemBuilder: (_, index){
      return ListTile(
        title: Text('the list item#$index'),
        subtitle: Text('thesubtitle'),
        leading: Icon(Icons.account_balance_wallet_rounded),
        trailing: Icon(Icons.arrow_forward),
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => DetailPage(index))
          );
        },
      );
    },
    );
}

enter image description here

here is details page code:

class DetailPage extends StatelessWidget{
final int index;
DetailPage(this.index);

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('detailsPage'),
        ),
        body: Center(
          child: Text('The details page#$index',style: TextStyle(fontSize: 32.0),),
        ),
      );
  }
}

CodePudding user response:

Use itemCount instead of hard-coded value like

   return ListView.builder(
        itemCount: months.length,
        itemBuilder: (_, index) {
          final month = months[index];
          return ListTile(
            title: Text('the list ${month}'),

CodePudding user response:

use this

  months[index]

full:

  ListView _buildListView(BuildContext context){
  List<String> months =
  ['January', 'February', 'March', 'April', 'May','June','July','August','September','October','November','December'];
  int i=0;

    return ListView.builder(itemCount: 12,
    itemBuilder: (_, index){
      return ListTile(
        title: Text(months[index]),
        subtitle: Text('thesubtitle'),
        leading: Icon(Icons.account_balance_wallet_rounded),
        trailing: Icon(Icons.arrow_forward),
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => DetailPage(index))
          );
        },
      );
    },
    );
}
  • Related