Creating a Simple List in Flutter – Dart

Tiempo de lectura: 3 minutos

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),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}