Home > Mobile >  how to update the value of a text in a card - Flutter/dart
how to update the value of a text in a card - Flutter/dart

Time:11-07

I'm trying to change the value of the text which is the 'placeholder' in this method. But for some reason it's not updating to the new value that i wrote & retrieved from the dialog. I even tested to see what's the value of 'placeholder' and it returned the correct value/text that i wrote in the dialog but still it wasn't updated in the card.

Widget buildTextField(
     String subtitle, String placeholder,icon) {
    // ignore: dead_code
    return Padding(
      
      padding: const EdgeInsets.only(bottom: 15.0),
      child:   Card(
        shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0)),
              color: Colors.white,
              margin: EdgeInsets.fromLTRB(100, 10, 100, 10),
              child: ListTile(
              
                title: Text(placeholder),
                subtitle: Text(subtitle),
               leading: Icon(
            icon,
            color: Color.fromARGB(255, 44, 148, 233),
            
          ),
          trailing: IconButton(
              onPressed: () async {
                final name = await openDialog(subtitle,placeholder);
              if(name == null || name.isEmpty) return;
              print(name);
              setState(() => placeholder = name);
              print(placeholder);
             //this.title: Text(placeholder);
              // setState(() {
              //   placeholder = this.name;
              // });
              },
              icon: Icon(Icons.edit_outlined),
            ),         ),
                ),
              );
    
  }
  
  Future <String?>openDialog(String subtitle, String placeholder) => showDialog<String>
  (
    context: context, builder: (context)=> AlertDialog(
    title: Text(subtitle),
    content: TextField(autofocus: true,
    decoration: InputDecoration(hintText: 'Enter your name'),
    controller: controller ..text = placeholder,
   // controller: controller,
    ),
    actions: [
      TextButton(onPressed: submit,
       child: Text('Save'))
    ],
  ),
  );
  void submit(){
   // Navigator.of(context).pop(controller.text);
  Navigator.of(context, rootNavigator: true).pop(controller.text);
  }

CodePudding user response:

The text don't update in your card because when your setState rebuild your widget tree, the call to the function buildTextField reset it to the value passed in parameter. You can try to use a variable defined in your class instead of using an Hard coded string in your function parameter.

Here an exemple:

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();
  String CardText = "Name";
  String CardSubtitle = 'Card Subtitle';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Color.fromRGBO(37, 57, 92, 1.0),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              buildTextField(
                  CardSubtitle, CardText, Icons.person
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildTextField(
      String subtitle, String placeholder,icon) {
    // ignore: dead_code
    return Padding(

      padding: const EdgeInsets.only(bottom: 15.0),
      child:   Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)),
        color: Colors.white,
        margin: EdgeInsets.fromLTRB(100, 10, 100, 10),
        child: ListTile(

          title: Text(placeholder),
          subtitle: Text(subtitle),
          leading: Icon(
            icon,
            color: Color.fromARGB(255, 44, 148, 233),

          ),
          trailing: IconButton(
            onPressed: () async {
              final name = await openDialog(subtitle,placeholder);
              if(name == null || name.isEmpty) return;
              print(name);
              setState(() => CardText = name);
              print(placeholder);
              //this.title: Text(placeholder);
              // setState(() {
              //   placeholder = this.name;
              // });
            },
            icon: Icon(Icons.edit_outlined),
          ),         ),
      ),
    );

  }

  Future <String?>openDialog(String subtitle, String placeholder) => showDialog<String>
    (
    context: context, builder: (context)=> AlertDialog(
    title: Text(subtitle),
    content: TextField(autofocus: true,
      decoration: InputDecoration(hintText: 'Enter your name'),
      controller: controller ..text = placeholder,
      // controller: controller,
    ),
    actions: [
      TextButton(onPressed: submit,
          child: Text('Save'))
    ],
  ),
  );
  void submit(){
    // Navigator.of(context).pop(controller.text);
    Navigator.of(context, rootNavigator: true).pop(controller.text);
  }

}

CodePudding user response:

Try to wrap your Card widget with the Builder Widget that can rebuild and update your widget

 Builder(
          builder: (context) {
            return Card(...);
          },
        ),
  • Related