1

i'm a bit new to flutter and i'm trying to teach myself to build a groceries list, which will be linked to an API backend. I want the text on a listtile to be editable ontap, so if the user makes a typo they can quickly edit the listtile without going through an additional dialogue.

Screenshot of list tiles

Code:

Widget _shoppingListItem() {
return ListView.builder(
  itemCount:
      _shoppingList.shoppingListCategories.first.shoppingListItems.length,
  itemBuilder: (context, index) {
    return Dismissible(
      background: Container(
        child: Text("Delete",
            style: TextStyle(
                fontWeight: FontWeight.normal, color: Colors.white)),
        color: Colors.red,
      ),
      confirmDismiss: (direction) {
        return showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text('Sure??'),
              content: Text('Delete'),
              actions: <Widget>[
                FlatButton(
                  onPressed: () {
                    // Navigator.pop(context, false);
                    Navigator.of(
                      context,
                      // rootNavigator: true,
                    ).pop(false);
                  },
                  child: Text('No'),
                ),
                FlatButton(
                  onPressed: () {
                    // Navigator.pop(context, true);
                    Navigator.of(
                      context,
                      // rootNavigator: true,
                    ).pop(true);
                  },
                  child: Text('Yes'),
                ),
              ],
            );
          },
        );
      },
      key: UniqueKey(),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                spreadRadius: 1,
                blurRadius: 6,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          child: ListTile(
            title: Text(
                _shoppingList.shoppingListCategories.first
                    .shoppingListItems[index].itemName,
                style:
                    TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                IconButton(
                  color: ColorPalette.dark2,
                  icon: icons.shoppingMinus.image(size: 24),
                  onPressed: () {
                    setState(() {
                      _shoppingList.shoppingListCategories.first
                          .shoppingListItems[index].itemCount--;
                    });
                  },
                ),
                Text(
                  "${_shoppingList.shoppingListCategories.first.shoppingListItems[index].itemCount}",
                  style: TextStyle(
                    color: ColorPalette.dark2,
                  ),
                ),
                IconButton(
                  color: ColorPalette.dark2,
                  icon: icons.shoppingPlus.image(size: 24),
                  onPressed: () {
                    setState(() {
                      _shoppingList.shoppingListCategories.first
                          .shoppingListItems[index].itemCount++;
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  },
);

} }

Geoffrey Brennet
  • 11
  • 2
  • 2
    First you need to add `TextField` widget instead of Text widget. Enable the TextField onTap. You can use a boolean value to do that. – Xihuny May 07 '21 at 10:03
  • 1
    @Xihuny But it's not only an input... The text should be displayed as a normal card to the user, and if they wish to edit the string they are able to tap on the card to edit this. I understand a textfield is more applicable to an input field? – Geoffrey Brennet May 07 '21 at 10:10
  • 2
    You can style the `TextField` in a way that it looks exactly like a `Text` widget. Users won't even notice any difference. I guess that's what your concern is right? – Xihuny May 07 '21 at 10:12
  • Yes indeed, that's interesting - and i can still pass a default string like with 'Text' ? – Geoffrey Brennet May 07 '21 at 10:26
  • 1
    You can use a controller in a `TextField` to do that. And do `controller.setText('your_text')` – Xihuny May 07 '21 at 11:55
  • @Xihuny you are a legend! I am now able to edit these. I do have one more question, is there a way, in flutter to tell my textfield to submit changes to the DB when the textfield is out of focus? (instead of a save button, i am trying to replicate something where once the user finished typing and goes to another field, the previously edited one is saved) – Geoffrey Brennet May 07 '21 at 13:00
  • Yes. You can use `FocusNode` on your `TextField` and add a listener or you can use `Focus` widget. – Xihuny May 07 '21 at 16:10
  • @Xihuny i'm having some issues - it seems my controller is not unique, so when i tap to edit one of the textfields in my listbuilder, i am editing them all simultaneously. Is there a way to assign unique controllers per item generated by the list builder? Or, a way that the controller only starts when the textfield becomes focussed? – Geoffrey Brennet May 08 '21 at 09:08
  • Yes. You need to give a unique controller to each `TextField`. You can do like this https://stackoverflow.com/a/52234459/3454744 – Xihuny May 08 '21 at 13:14

0 Answers0