In this example, I'm going to share an example of how to select items in a ListView with a Trailing Icon and changing the style of App Bar.
Here is how the output of the program is going to look like. You can see the items are long pressed, the checkbox icons will appear and allow the user to select the items. When the back button in AppBar is pressed, everything is reset back to normal.
![](https://fluttercentral.com/Uploads/7a1868d1-79eb-4bd6-a872-bc356d371a80.gifwidth="50%height="auto](
On LongPress of the ListView items, it will show the Trailing CheckBoxes which will allow user to Tap on the item and select the item.
By extending this example, you can actually keep track of the items selected or delete them. However, I'm not implementing this in this example.
font-size: 1rem;](Here is the full code from main.dart file. Copy-paste and run the program to see the above output.
font-size: 1rem;](
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #569cd6;](@override
color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();
}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #4ec9b0;](bool selectingmode = color: #569cd6;](false;
color: #4ec9b0;](List paints = [
color: #4ec9b0;](Paint(color: #b5cea8;](1, color: #ce9178;]('Red', color: #4ec9b0;](Colors.red),
color: #4ec9b0;](Paint(color: #b5cea8;](2, color: #ce9178;]('Blue', color: #4ec9b0;](Colors.blue),
color: #4ec9b0;](Paint(color: #b5cea8;](3, color: #ce9178;]('Green', color: #4ec9b0;](Colors.green),
color: #4ec9b0;](Paint(color: #b5cea8;](4, color: #ce9178;]('Lime', color: #4ec9b0;](Colors.lime),
color: #4ec9b0;](Paint(color: #b5cea8;](5, color: #ce9178;]('Indigo', color: #4ec9b0;](Colors.indigo),
color: #4ec9b0;](Paint(color: #b5cea8;](6, color: #ce9178;]('Yellow', color: #4ec9b0;](Colors.yellow)
];
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
home: color: #4ec9b0;](Scaffold(
appBar: color: #4ec9b0;](AppBar(
leading: selectingmode
? color: #4ec9b0;](IconButton(
icon: color: #569cd6;](const color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.arrow_back),
onPressed: () {
color: #dcdcaa;](setState(() {
selectingmode = color: #569cd6;](false;
paints.color: #dcdcaa;](forEach((p) => p.selected = color: #569cd6;](false);
});
},
)
: color: #569cd6;](null,
title: color: #4ec9b0;](Text(color: #ce9178;]("Selectable ListView Example"),
),
body: color: #4ec9b0;](ListView(
children: color: #4ec9b0;](List.color: #dcdcaa;](generate(paints.length, (index) {
color: #c586c0;](return color: #4ec9b0;](ListTile(
onLongPress: () {
color: #dcdcaa;](setState(() {
selectingmode = color: #569cd6;](true;
});
},
onTap: () {
color: #dcdcaa;](setState(() {
color: #c586c0;](if (selectingmode) {
paints[index].selected = !paints[index].selected;
color: #dcdcaa;](log(paints[index].selected.color: #dcdcaa;](toString());
}
});
},
selected: paints[index].selected,
leading: color: #4ec9b0;](GestureDetector(
behavior: color: #4ec9b0;](HitTestBehavior.opaque,
onTap: () {},
child: color: #4ec9b0;](Container(
width: color: #b5cea8;](48,
height: color: #b5cea8;](48,
padding: color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(vertical: color: #b5cea8;](4.0),
alignment: color: #4ec9b0;](Alignment.center,
child: color: #4ec9b0;](CircleAvatar(
backgroundColor: paints[index].colorpicture,
),
),
),
title: color: #4ec9b0;](Text(color: #ce9178;]('ID: ' + paints[index].id.color: #dcdcaa;](toString()),
subtitle: color: #4ec9b0;](Text(paints[index].title),
trailing: (selectingmode)
? ((paints[index].selected)
? color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.check_box)
: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.check_box_outline_blank))
: color: #569cd6;](null,
);
}),
),
),
);
}
}
color: #569cd6;](class color: #4ec9b0;](Paint {
color: #569cd6;](final color: #4ec9b0;](int id;
color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](final color: #4ec9b0;](Color colorpicture;
color: #4ec9b0;](bool selected = color: #569cd6;](false;
color: #4ec9b0;](Paint(color: #569cd6;](this.id, color: #569cd6;](this.title, color: #569cd6;](this.colorpicture);
}
`
font-size: 1rem;](Hope this will be useful to you.
Thanks,Srikanth