Changing color of login button once user enters username and password in flutter

Issue

I need to be able to change the color of the greyed out portion in the bottom of the screen when a user enters something in the username and password fields. So for example if a user enters there username and password, it changes to green as well as the word login and icon button changing to white.

The icon above the login text is an image I stored inside IconButton(), the problem here is I can not figure out how to change the grey color to white, is there any way to do this. So far this is what I have:

Here is the code I have so far for the login button, it is still a work in progress, I just call the button with the constructor in my login page.

import 'package:flutter/material.dart';

class LoginButton extends StatefulWidget {

  // final double width;
  // final double height;

  // final Color toggleColor;
  // final Color toggleBackgroundColor;
  // final Color toggleBorderColor;
  //
  // final Color inactiveBackgroundColor;
  // final Color inactiveTextColor;
  // final Color inactiveIconColor;
  final Color activeBackgroundColor;
  final Color activeTextColor;
  final Color activeIconColor;

  const LoginButton(
      {Key? key,
        // required this.width,
        // required this.height,
        // required this.toggleBackgroundColor,
        // required this.toggleBorderColor,
        // required this.toggleColor,
        // required this.inactiveBackgroundColor,
        // required this.inactiveTextColor,
        // required this.inactiveIconColor,
        required this.activeBackgroundColor,
        required this.activeTextColor,
        required this.activeIconColor,
        }) : super(key: key);

  @override
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {

  late Color _unfilledBackgroundColor;
  late Color _unfilledTextColor;
  late Color _unfilledIconColor;
  late Color _filledBackgroundColor;
  late Color _filledTextColor;
  late Color _filledIconColor;

  @override
  void initState() {
    super.initState();

    // _unfilledBackgroundColor = widget.inactiveBackgroundColor;
    // _unfilledTextColor = widget.inactiveTextColor;
    // _unfilledIconColor = widget.inactiveIconColor;
    _filledBackgroundColor = widget.activeBackgroundColor;
    _filledTextColor = widget.activeTextColor;
    _filledIconColor = widget.activeIconColor;

  }

  @override
  Widget build(BuildContext context)
  {
    return Material(
      child: Align(
        alignment: Alignment.bottomRight,
        child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  child: IconButton(
                    padding: EdgeInsets.all(0.0),
                    icon: Image.asset('assets/icons/run_protocol.png'),
                    onPressed: () {
                      Navigator.pushNamed(context, '/second');
                    },
                  ),
                ),
                Text(
                  'Login',
                  style: TextStyle(color: widget.activeTextColor),
                ),
              ],
            ),
            width: 350,
            height: 100,
            decoration: BoxDecoration(
              color: widget.activeBackgroundColor,
            )
        ),
      ),
    );
  }
}

Solution

Question 1: How to change the color to green, once the user entered something in both textformfields?

1. Add a TextEditingController to the controller property of each textformfield and initialize it with an empty text.

Like this:

  final _userNameController = TextEditingController(text: "");

  final _passwordController = TextEditingController(text: "");

Don´t forget to dispose them to avoid memory leaks:

  @override
  void dispose() {
    _userNameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

2. Write your logic for changing the color:

You could use a function that returns true, if the user entered his/her credentials:

bool isFormFilledOut() {
 if(_userNameController.text == "" || _passwordController.text == "")
     {return false;}
 else {return true;}
}

3. Call this method from your onChanged property of both textformfields to always see whether they are empty or not.

4. Connect the result of the function to your preferred statemanagement tool, or simply use a callback to pass the value to your LoginButton widget via its constructor parameters. So it can show the proper color via a ternary expression like this: isFilledOut ? Colors.white : Colors.grey

Question 2: How to change the grey icon color to white?

There are pretty much two options for you:

Option 1: Create a second asset image with white background color, add it to your assets and render them conditionally. The code could look something like this:

 icon: Image.asset(isFilledOut ? 'assets/icons/run_protocol_white.png' : 
'assets/icons/run_protocol_grey.png'),

Option 2: Re-create that widget yourself with the help of an CircleAvatar with the preferred color using a ternary expression (isFilledOut ? Colors.white : Colors.grey) and set the child to Icon(Icons.arrow_forward);

Answered By - Jahn E.