Flutter TextField cambia el color del icono cuando se selecciona

Te damos la bienvenida a nuestro sitio web, ahora vas a encontrar la respuesta a lo que buscas.

Solución:

Cuando se selecciona, el color que se muestra es la aplicación primaryColor: del tema.

Una forma de cambiar es usar Theme Widget.

 Theme(
                              child: TextField(
                                decoration: InputDecoration(
                                  prefixIcon: Icon(Icons.email),
                                  labelText: "Email",
                                  hintText: "[email protected]",
                                ),
                                autofocus: true,
                              ),
                              data: Theme.of(context)
                                  .copyWith(primaryColor: Colors.redAccent,),
                            ),

Otro es cambiar primaryColor en MaterialApp Nivel de tema.

Envuelve tu TextField alrededor de Theme widget y cambiar el primaryColor. Si su brillo está configurado en oscuro, cambie el accentColor en lugar de

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Demo App',
      theme: ThemeData(
        brightness: Brightness.light, // default value
      ),
      home: DemoPage(),
    );
  


...

  @override
  Widget build(BuildContext context) 
    return Theme(
      data: Theme.of(context).copyWith(
        // override textfield's icon color when selected
        primaryColor: Colors.blue,
      ),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.lock_outline),
          hintText: 'Username',
        ),
      ),
    );
  

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Demo App',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: DemoPage(),
    );
  


...

  @override
  Widget build(BuildContext context) 
    return Theme(
      data: Theme.of(context).copyWith(
        // override textfield's icon color when selected
        accentColor: Colors.blue,
      ),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.lock_outline),
          hintText: 'Username',
        ),
      ),
    );
  

Te mostramos reseñas y calificaciones

Al final de la post puedes encontrar los comentarios de otros desarrolladores, tú igualmente puedes insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador