How do i modify the data of an existing variable in flutter?

user_11924854 0
Viewed 42

I want to make an editable TextWidget in flutter but I don't really know how to go around it, I did some research, but still can't find a good solution. Here's my sample code below.

I have a variable called int qty = 1; and so I called the variable in TextWidget

Column(
    children: [
    Text(
      "${qty}",
      style: TextStyle(),
      )
    ],
  ),

I want to have these features that make user tab on the value to change it if they want, upon tap, a pop-up dialog will show to give the user the ability to change the existing value to whatever the user wants.

Please if anyone knows how, please help.

dart flutter
2 Answers

You will need a statfull widget to call setState and make the UI update with the new value stored in your qty variable. (I'am assuming that you are not using any state managment).

I wrote a possible solution for what you need. Let look into some considerations:

  1. Text will show whatever is in the qty as long we call setState after (or do it inside) we change the value of qty.
  2. You need some widget to detect your tap. If you want to the text be 'clicable' then it should be wraped inside that widget.
  3. The onTap/onPress call back of that widget should show a new widget. For this you can use the already made showDialog() and pass it a Dialog Widget. in here you will put your ui for that.
  4. In some point of that UI you need to introduce the new value. So you can use a simple TextField that will save the introduced value, where you can assign it to qty, without forgetting to call setState! Note that it deal with strings, so you neet to do an int.parse() ou double.parse accordingly to you qty var type.

And I think that's it. The could be other ways of doing it. This is a good and simple approach for your need.

I wrote a piece of code to help or somelse how is trying to do it:

enter image description here

InkWell(
          // can be gesture detector, button, etc
          onTap: () => showDialog(
              context: context,
              builder: (context) => Dialog(
                    child: Container(
                        color:
                            Colors.white60, // change it accordingly to you
                        height: 80, // change it accordingly to you
                        width: 200, // change it accordingly to you
                        child: Column(
                          children: [
                            const Text('Change your value here'),
                            TextField(
                              decoration:
                                  InputDecoration(hintText: qty.toString()),
                              onChanged: (insertValue) => setState(() {
                                qty = int.parse(insertValue);
                              }),
                              // you can use other callBack function (like onComplete,
                              //    onSaved), wich is more eficient than calling setState eveytime,
                              //    but you have to do the needed adtaptions. Like onSave
                              //    needs a key to call the save function. is easy just google it.
                            ),
                          ],
                        )),
                  )),
          child: Text(
            "${qty}",
          ),
        ),
user_148959970

What you are probably looking is a DropdownButton.

You would have something like this:

int qty = 1;
List<int> listOfValues = [1,2,3,4];

and then in your column you would have

DropdownButton<int>(
      // This are the list of items that will appear in your dropdown menu.
      // items is all the options you want your users to be able to select from,
      // and it take a list of `DropdownMenuItem`. So instead of creating a `DropdownMenuItem`
      // for each of the items in `listOfValues`, we iterate through it and return
      // a `DropdownMenuItem`
      items: listOfValues
          .map((item) => DropdownMenuItem<int>(
                value: item,
                child: Text('$item'),
              ))
          .toList(),
      value: qty,
      onChanged: (value) {
        if (value != null) {
          setState(() {
            qty = value;
          });
        }
      },
    ),

For more information on DropDownButton, check the following links:

https://api.flutter.dev/flutter/material/DropdownButton-class.html

https://www.youtube.com/watch?v=K8Y7sWZ7Q3s

Note: In a scenario where you want to increase the quantity of an item, like in a shopping cart, maybe having a button increment qty by 1 would be better.

user_121956950
Related