Reading time: 3 minutes
To create an example list where we can add an element, update the list, and also remove elements, follow these steps:
First, we create the main Widget that we call from main, where we display the .dart class with the designed view.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DevCodeLight Shopping List',
theme: ThemeData(primarySwatch: Colors.cyan),
home: DevCodeLightList(),
);
}
}
Then, we create a StatefulWidget to allow the view to be modified based on the variables and elements in the list that we create.
The Widget is mainly composed of an inputDecoration, a component where we can enter text, and a button to add the entered text to the list.
Next, we need to add a ListTile as shown in the following example:
ListView.builder( itemCount: shopping_list.length, itemBuilder: (context, index) { return ListTile( title: Text(shopping_list[index]), trailing: IconButton( icon: Icon(Icons.delete), onPressed: () => delete(index), ), );
Here’s an example with the complete code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DevCodeLight Shopping List',
theme: ThemeData(primarySwatch: Colors.cyan),
home: DevCodeLightList(),
);
}
}
class DevCodeLightList extends StatefulWidget {
@override
_DevCodeLightListState createState() => _DevCodeLightListState();
}
class _DevCodeLightListState extends State<DevCodeLightList> {
List<String> shopping_list = []; // List to store the items
String new_item = ''; // Variable to store the new item
void create() {
setState(() {
shopping_list.add(new_item); // Add the new item to the list
new_item = ''; // Clear the text field for the new item
});
}
void delete(int index) {
setState(() {
shopping_list.removeAt(index); // Remove the selected item from the list
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('DevCodeLight Shopping List')),
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16.0),
child: TextField(
onChanged: (value) {
setState(() {
new_item = value; // Update the variable with the value from the text field
});
},
decoration: InputDecoration(
labelText: 'New item for DevCodeLight',
),
),
),
ElevatedButton(
onPressed: () => create(),
child: Text('Add New item for DevCodeLight'),
),
Expanded(
child: ListView.builder(
itemCount: shopping_list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(shopping_list[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => delete(index),
),
);
},
),
),
],
),
);
}
}

We create a product:

When we click the ‘Add New item for DevCodeLight’ button, we verify that the item is added to the list.

If we create multiple products, the list will look like the following image:

And finally, we verify that when we click on the trash bin icon of the item named “cuadernos” in the list, it gets deleted.


I hope this helps, have a great day!
