Question 127719 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Use text editing controller inside on changed flutter

I am trying to use my text editing controller userNameController.text as a string value to pass into onChanged(). When the text field has something in it, I have a Boolean isUserFilled which is set to true, and false when the text field is empty, I originally was using the system keyboard and this worked just fine. Although I am now using a keyboard which is connected to a text editing controller and the Boolean is no longer changing. I am also getting this error:

The prefix ‘userNameController’ can’t be used here because it is shadowed by a local declaration, Try renaming either the prefix or the local declaration.

How can I grab the text from the text editing controller and pass it into the onchanged() so that when the text field has a value, it changes the Boolean true?

I attached the code below which has the text editing controller connected to controller:

textfield for username


TextField(
                      // Checking the UserName textField for user input, returns a boolean to isUserFilled
                     controller: userNameController,
                      readOnly: true,
                      showCursor: true,
                      onTap: () {
                       setState(() {
                         keyboardUp ? _controller.reverse() : _controller.forward();
                         userSelected = true;
                       });
                      },
                      onChanged: (userNameController.text) {
                        setState(() {
                          isUserFilled = userNameController.text.isNotEmpty;
                        });
                      },
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                      ),
                    ),

textfield for password

TextField(
                      style: TextStyle(fontSize: 24),
                     controller: passwordController,
                      readOnly: true,
                      showCursor: true,
                      obscureText: true,
                      onTap: () {
                        userSelected = false;
                        keyboardUp = false;
                      },
                      // Checking the Password textField for user input, returns a boolean to isPasswordFilled
                      onChanged: (input) {
                        setState(() {
                          isPasswordFilled = passwordController.text.isNotEmpty;
                          print(isPasswordFilled);
                        });
                      },
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                      ),
                    ),

methods which change the color upon conditional

import 'package:flutter/material.dart';

bool isUserFilled = true; // I think these may be the issue
bool isPasswordFilled = true;

Color backgroundColor()
{

  // This function uses the boolean value isUserFilled
  // to decide which color to use as background in the login button
  if (isUserFilled == false && isPasswordFilled == false)  {
    return Color.fromRGBO(156, 156, 156, 50);
  } else if (isUserFilled == true && isPasswordFilled == true){
    return Color.fromRGBO(70, 224, 64, 1);
  } else {
    return Color.fromRGBO(156, 156, 156, 50);
  }
}

String iconColor()
{
  // This function uses the boolean value isUserFilled
  // to decide which image to use in the login button
  if (isUserFilled == false && isPasswordFilled == false) {
    return 'assets/login/run_protocol_grey.png';
  } else if (isUserFilled == true && isPasswordFilled == true) {
    return 'assets/login/run_protocol_white.png';
  } else {
    return 'assets/login/run_protocol_grey.png';
  }
}

Color textColor()
{
  // This function uses the boolean value isUserFilled
  // to decide which color the text will be in the login button
  if (isUserFilled == false && isPasswordFilled == false) {
    return Color.fromRGBO(189, 189, 189, 1);
  } else if (isUserFilled == true && isPasswordFilled == true) {
    return Color.fromRGBO(255, 255, 255, 1);
  } else {
    return Color.fromRGBO(189, 189, 189, 1);
  }
}
Tags:

2

Answers


  1. 0

    Try this:

    @override
void initState(){
 userNameController.addListener(() {
   setState(() {
     isUserFilled = userNameController.text.isNotEmpty
   });
  });
}
    Login or Signup to reply.
  2. 0

    You don’t need to pass the value from the controller to onChanged (in fact, it’s not possible, because the value passed to the onChanged function is passed in by the TextField widget itself).

    Whatever value is in the textfield after the field is changed, that is what is passed into onChanged.

    Therefore, you can simply do this (for each of your fields):

    // Username
onChanged: (newValue) {
  setState(() {
    isUserFilled = !newValue.isEmpty;
  });
},

// Password
onChanged: (newValue) {
  setState(() {
    isPasswordFilled = !newValue.isEmpty;
  });
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search