How can i change TextField on hover in flutter?

Question

Hi i'm trying to change the background color of my TextField Widget in flutter when the user focus on it. But it kinda seems there is no way to do it. If anybody has any idea please let me know ^^.

Here's the Widget itself:

TextField(    
                          
                          controller: emailController,
                          style: TextStyle(
                              color: Colors.white, fontSize: 18, height: 0.8),
                          textAlign: TextAlign.center,
                          decoration: InputDecoration(
                            focusColor: AppColors.inputBackgroundDarkFocus,
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10),
                              borderSide: BorderSide(color: Color(color)),
                            ),
                            filled: true,
                            fillColor: Color(0xff25282C),
                            hintText: 'Email',
                            hintStyle:
                                TextStyle(fontSize: 18, color: Colors.white),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                          ),
                        ),

Thks <3

Answer 1

Hover & focus are two different things, so this might not answer your question, but the below can change field color "on focus" (the cursor is in the field).

If you're implementing purely for Flutter web and you want to handle "hover" you could do the below with a MouseRegion wrapper instead of Focus. Info on MouseRegion.

---

By wrapping a form field in a Focus widget, you can listen/capture focus changes on that field using the onFocusChange constructor argument (of Focus).

It takes a Function(bool).

Here's an example of an onFocusChange handler function:

  onFocusChange: (hasFocus) {
    if (hasFocus) {
      print('Name GAINED focus');
      setState(() {
        bgColor = Colors.purple.withOpacity(.2);
      });
    }
    else {
      print('Name LOST focus');

      setState(() {
        bgColor = Colors.white;
      });
    }
  },

If you wrap your field in a Container, you can give the Container a color and change that color using a Focus widget described above.

Here's a full page example (stolen from another answer of mine on a similar topic):

import 'package:flutter/material.dart';

class TextFieldFocusPage extends StatefulWidget {
  @override
  _TextFieldFocusPageState createState() => _TextFieldFocusPageState();
}

class _TextFieldFocusPageState extends State<TextFieldFocusPage> {
  Color bgColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // ? Add this wrapper
              Focus(
                child: Container(
                  color: bgColor,
                  child: TextField(
                    autofocus: true,
                    decoration: InputDecoration(
                      labelText: 'Name'
                    ),
                    textInputAction: TextInputAction.next,
                    // ? Handle focus change via Software keyboard "next" button
                    onEditingComplete: () {
                      print('Name editing complete');
                      FocusScope.of(context).nextFocus();
                    },
                  ),
                ),
                canRequestFocus: false,
                // ? Focus widget handler, change color here
                onFocusChange: (hasFocus) {
                  if (hasFocus) {
                    print('Name GAINED focus');
                    setState(() {
                      bgColor = Colors.purple.withOpacity(.2);
                    });
                  }
                  else {
                    print('Name LOST focus');

                    setState(() {
                      bgColor = Colors.white;
                    });
                  }
                },
              ),
              TextField(
                decoration: InputDecoration(
                  labelText: 'Password'
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I think you can repeat this for each field you need colored.

Answer 2

Hovering can be managed using the hoverColor property of InputDecoration:

Full source code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hover TextField Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(16.0),
        alignment: Alignment.center,
        child: TextField(
          decoration: InputDecoration(
            filled: true,
            hoverColor: Colors.indigo.shade200,
            hintText: 'Email',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

Almost every style property can be changed by decoration property, which requires an InputDecoration object.

To handle the hover style, this object provides only the hoverColor property, which overwrite the filledColor when the mouse is hovering the widget. The filled property needs to be true for this to work.

InputDecoration(
            filled: true,
            hoverColor: Colors.red,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),

The problem is when you want to change others style properties like the border for example.

In that case you need to make your widget Statefull and add a state boolean like isHover.

Then you could wrap your widget inside MouseRegion and handle the hovering like in this example:

return MouseRegion(
    onEnter: (_)=>setState(()=>isHover = true),
    onExit: (_)=>setState(()=>isHover = false),
    child: YourWidget(),
);

Once isHover is available you can use wherever you want to change the UI according to the hover state.

Example with border:

        TextField(
          decoration: InputDecoration(
            filled: true,
            hoverColor: Colors.red,
            border: isHover? OutlineInputBorder(
              borderSide: BorderSide(
                color: Colors.green,
                width: 1.5,
              ),
              borderRadius: BorderRadius.circular(8.0),
            ) : null,
            //By leaving null, the component will use the default value
          ),
        ),

I think the limitation is due to the fact that the hover behaviour is more web/desktop related. I hope flutter is going to implement better properties to handle this inside InputDecoration.