<p>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.</p> <p>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.</p> <p>);</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override</p> <p>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;](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</p> <p id="569cd6;](true;" selectingmode="color:">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(() ); }, 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, ); }), ), ), ); } }</p> <p>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); } `</p> <p>font-size: 1rem;](Hope this will be useful to you. Thanks,Srikanth</p>
Select Items in a ListView in Flutter - with a Trailing Icon and changing the style of App Bar
This Article is posted by seven.srikanth at 10/29/2019 6:21:37 PM
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter
Tags: Select items in ListView; OnLongPress ListTile; ListView Example; add icon to ListView;
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter