Select Items in a ListView in Flutter

This Article is posted by seven.srikanth at 10/25/2019 6:48:09 AM



<p>In this example, I'm going to share an example of how to select items in a ListView. Here is how the output of the program is going to look like. You can see the items are slightly turned into blue on long press. ![](<a href="https://fluttercentral.com/Uploads/fff0d076-3f6c-430c-a095-a98e77bdaade.gifwidth=%2250%height=%22autofont-size">https://fluttercentral.com/Uploads/fff0d076-3f6c-430c-a095-a98e77bdaade.gifwidth="50%height="autofont-size</a>: 1rem;](</p> <p>In order to achieve this, I've taken advantage of onLongPress method available in ListTile. Here is the full code from main.dart file. Copy-paste and run the program to see the above output. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('dart:developer'; color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => 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();}</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](0; 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( 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(() { paints[index].selected = !paints[index].selected; color: #dcdcaa;](log( paints[index].selected.color: #dcdcaa;](toString()); }); }, selected: paints[index].selected, leading: color: #4ec9b0;](Container( width: color: #b5cea8;](100.0, height: color: #b5cea8;](100.0, color: paints[index].colorpicture, ), title: color: #4ec9b0;](Text(color: #ce9178;]('ID: ' + paints[index].id.color: #dcdcaa;](toString()), subtitle: color: #4ec9b0;](Text(paints[index].title), ); }), ), ), ); }} 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);} Hope this will be useful to you. Thanks,Srikanth</p>


Tags: Select items in ListView; OnLongPress ListTile; ListView Example;








0 Comments
Login to comment.
Recent Comments