Use text editing controller inside on changed flutter

Issue

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);
  }
}

Solution

Try this:

@override
void initState(){
 userNameController.addListener(() {
   setState(() {
     isUserFilled = userNameController.text.isNotEmpty
   });
  });
}

Answered By - Josteve