Search code examples
fluttertextfieldonchange

Flutter how change dynamic the lable of textfield


I'm trying to change the lable of a textfield after klick on a radio button.

Here my example:

enter image description here

enter image description here

If im klick on radio button private the textfield lable should change. I try to change a variable if im click on radio button. The value of variable change but not update the lable.

Here full code:

//check radio
List<bool> btn_radio = [true, false];

//field name
String? lable;

//controller
TextEditingController _controller_Name = new TextEditingController();

class DebugPage extends StatefulWidget {
  @override
  _DebugPage createState() => _DebugPage();
}

class _DebugPage extends State<DebugPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: customSubAppBar("Debug", context),
        body: _body(context)); 
  }
}

//body
_body(context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(height: MediaQuery.of(context).size.height * 0.3),
        BuildAppRadioButton(),
        BuildAppFieldName(),
      ],
    ),
  );
}

//radio button
class BuildAppRadioButton extends StatefulWidget {
  @override
  _BuildAppRadioButton createState() => _BuildAppRadioButton();
}

//radio button
class _BuildAppRadioButton extends State<BuildAppRadioButton> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //spacer
        Spacer(),

        //radio button
        Container(
          width: MediaQuery.of(context).size.width * 0.37,
          child: CustomRadioButtonRegister(
            isPressed: btn_radio[0],
            label: 'Private',
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            value: true,
            groupValue: btn_radio[0],
            onChanged: (bool newValue) {
              setState(() {
                btn_radio[0] = true;
                btn_radio[1] = false;

                lable = 'label';
              });
            },
          ),
        ),

        //spacer
        Spacer(),

        //radion button
        Container(
          width: MediaQuery.of(context).size.width * 0.37,
          child: CustomRadioButtonRegister(
            isPressed: btn_radio[1],
            label: "Company",
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            value: true,
            groupValue: btn_radio[1],
            onChanged: (bool newValue) {
              setState(() {
                btn_radio[1] = true;
                btn_radio[0] = false;
              });
            },
          ),
        ),

        //spacer
        Spacer(),
      ],
    );
  }
}

//name
class BuildAppFieldName extends StatefulWidget {
  @override
  _BuildAppFieldName createState() => _BuildAppFieldName();
}

//name
class _BuildAppFieldName extends State<BuildAppFieldName> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.8,
      height: MediaQuery.of(context).size.height * 0.09,
      child: TextFormField(
        //controller: _controller_companyName,
        style: TextStyle(
          color: Colors.black,
        ),
        decoration: InputDecoration(
          labelText: lable,
          labelStyle: TextStyle(
            color: Colors.black,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
        ),
        onChanged: (value) {},
      ),
    );
  }
}

Anyone have a idea how i can do this. Many thx (:


Solution

  • Without complete code, I'm assuming BuildAppRadioButton and BuildAppFieldName are siblings in a higher-up Column() or similar container Widget.

    You need a way for RadioButton widget to communicate with FieldName widget. The easiest way to do this is through the parent widget state using a callback.

    In a parent stateful widget, create a String variable to hold your label String _textFieldLabel and a callback:

    _onRadioButtonChange(String label) {
      setState(() {
        _textFieldLabel=label;
      });
    }
    

    Pass this callback to BuildAppRadioButton() as Function onChanged; - i.e. onChanged: _onRadioButtonChange,. Pass _textFieldLabel to BuildAppFieldName().

    In your BuildAppRadioButton()->CustomRadioButtonRegister()->onChanged() call that callback with the correct label:

    onChanged: (bool newValue) {
      setState(() {
        btn_radio[1] = true;
        btn_radio[0] = false;
      });
      widget.onChanged("Label_for_field");
    },