Flutter : Textield clear automaticly after input text-CodePudding

I have this text field in flutter app using provider as shown :

getPhoneNumberScreen(size, context) {
  var remianheight = size.height - 70;
  TextEditingController _phoneNumber = TextEditingController();
  TextEditingController _code = TextEditingController();

  return TextField(
                  keyboardType: TextInputType.number,
                  controller:
                      !authProvider.isPhoneNumberInserted ? _phoneNumber : _code,
                  decoration: InputDecoration(
                      isDense: true,
                      hintText: !authProvider.isPhoneNumberInserted
                          ? 'Phone Number'
                          : 'Verification Code',
                      enabledBorder: UnderlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0x00000000),
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0x00000000),
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      filled: true,
                      fillColor: ColorManager.helibi,
                      contentPadding:
                          const EdgeInsetsDirectional.fromSTEB(20, 15, 0, 15),
                      prefixIcon: const Icon(
                        Icons.phone_sharp,
                        color: Color(0xFF8F8F8F),
                      )),
                );
}

When I try to input some text, it is clear after I finish. Also how make the textfild move up to be shown.

CodePudding user response：

As i understand from your question you want to clear you TextField after your finish and also you want to focus into your TextField:

For the first question: you can simply create TextEditingController for that.

TextEditingController phoneController = new TextEditingController();

Assign this controller into your TextField:

controller : phoneController,

And on the finish function just call :

phoneController.clear();

Or try to implement that inside your provider.

For requesting focus for the TextField, you have to implement FocusNode for that.

FocusNode phoneFocusNode = new FocusNode();

implement it inside your TextField:

focusNode : phoneFocusNode,

the request focus where ever you want by calling:

phoneFocusNode.requestFocus();

CodePudding user response：

the mistake is it controller of textfield mus be outside the method :

TextEditingController _phoneNumber = TextEditingController();
TextEditingController _code = TextEditingController();
getPhoneNumberScreen(size, context) {
  var remianheight = size.height - 70;
  

  return TextField(
                  keyboardType: TextInputType.number,
                  controller:
                      !authProvider.isPhoneNumberInserted ? _phoneNumber : _code,
                  decoration: InputDecoration(