flutter – ListTile separator

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - ListTile Separator")
          ),
          body: bodyContent()
      ),
    ),
  );
}

bodyContent(){
  return Center(
      child: ListView.separated(
          itemCount: 50,
          padding: const EdgeInsets.all(8),
          itemBuilder: (context,index){
            return ListTile(
                title: Text("${index+1}. I am title"),
                subtitle: const Text("I am subtitle"),
                trailing: const Icon(Icons.grading),
                contentPadding: const EdgeInsets.symmetric(
                    horizontal: 24, vertical: 12
                ),
                tileColor: index % 2 ==0 ?
                Colors.green.shade50 : Colors.green.shade100
            );
          },
          separatorBuilder: (context, index) {
            return Divider(
              color: Colors.green.shade300,
              height: 1.2,
              thickness: 1.2
            );
          }
      )
  );
}

More flutter tutorials

• flutter – ListTile remove padding
• flutter – Space between ListTile leading and title
• flutter – ListTile shape
• flutter – ListTile multiple trailing icons
• flutter – ListTile trailing row
• flutter – ListTile onTap
• flutter – Random double in range
• flutter – Double 2 decimal
• flutter – How to generate random color
• flutter – Get random element from a list
• flutter – How to generate random string
• flutter – How to generate random bool
• flutter – How to use Google Fonts
• flutter – Google fonts text theme
• flutter – Function default value