How to Change the label of an existing chip in flutter?

Question

I'm using chips in my code when I tap on chip a counter is displayed, I want to update the chip label with when count is added.

Widget returnWidget() {
    return InkWell(
      child: Chip(
        label: Text(temp!),
      ),
      onTap: () {
        print(temp);
        _showMyDialog();
      },
    );
  }

This is the widget I'm using to add multiple chips.

Future<void> _showMyDialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          scrollable: false,
          title: const Text('Add Count'),
          content: Container(
            height: 50,
            width: 50,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(3),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                AddCount(),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Cancel'),
              onPressed: () {
                {
                  setState(() {
                    _itemCount = 0;
                  });
                }
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text('Add'),
              onPressed: () {
                if(count==0) {
                  setState((){
                    temp = temp! + _itemCount.toString();
                    Text(temp!);
                    count++;
                  });
                }
                print(text);
              },
            ),
          ],
        );
      },
    );
  }

This is the code block which is showing a counter dialog. I want to update chip label on add.

Answer 1

Hello here I have a solution, I did not see more details about your code but here I did a working solution, the variable you want to update should be located inside the classed where is used but you can also use state management or InheritedWidget to update variables globally:

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  int temp = 0;  //  declare the variable inside the class you want to update it

  Future<void> _showMyDialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          scrollable: false,
          title: const Text('Add Count'),
          content: Container(
            height: 50,
            width: 50,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(3),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                // AddCount(),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Cancel'),
              onPressed: () {
                  Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text('Add'),
              onPressed: () {
                setState((){
                  temp = temp += 1;   // update the chip UI
                });
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  Widget returnWidget() {
    return InkWell(
      child: Chip(
        label: Text("count $temp"), // <-- new change
      ),
      onTap: () {
        print(temp);
        _showMyDialog();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Center(
        child: Container(
          margin: const EdgeInsets.all(32),
          child: returnWidget(),
        ),
      ),
    );
  }
}