es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“No hay cambio en el TextField cuando se utiliza en flutter.”

10 Jun, 2023 Programación

Estoy preguntando si es posible que el TextField no cambie cuando se utiliza.
Este es mi código:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App de compras',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);

  @override
  State<myhomepage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<myhomepage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: 
        Padding(
          padding: EdgeInsets.all(25.0),
          child: TextField(
            onChanged: (value) {},
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: const BorderSide(color: Colors.white, width: 0.0),
                borderRadius: BorderRadius.circular(20.0)
              ),
              fillColor: Colors.white,
              filled: true,
              hintText: "Buscar",
              hintStyle: TextStyle(
                color:  Colors.grey.withOpacity(0.5),
              ),
            ),
            cursorColor: Colors.white, // Establece el color del cursor
            showCursor: true, // Establece la propiedad para mostrar el cursor
          ),
        )
      ),
    );
  }
}

La primera imagen muestra mi TextField cuando no se utiliza y la segunda muestra cuando se utiliza.
Quiero que mi TextField se vea igual todo el tiempo. Solo el cursor es algo que debería mostrarse.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible que el TextField tenga siempre el mismo aspecto y solo muestre el cursor cuando se utiliza. Para lograr esto, se puede eliminar la propiedad onChanged del widget TextField. La propiedad onChanged es la que activa la actualización del TextField y muestra el texto que se está escribiendo. Por lo tanto, al eliminarla, el TextField no se actualizará y siempre tendrá el mismo aspecto. El cursor seguirá siendo visible cuando se toque o se enfoque en el TextField.

    Aquí está el código actualizado sin la propiedad onChanged:

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Shop App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<myhomepage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<myhomepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(25.0),
          child: TextField(
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: const BorderSide(
                    color: Colors.white, width: 0.0),
                borderRadius: BorderRadius.circular(20.0),
              ),
              fillColor: Colors.white,
              filled: true,
              hintText: "Buscar",
              hintStyle: TextStyle(
                color: Colors.grey.withOpacity(0.5),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    Con este cambio, el TextField siempre tendrá el mismo aspecto que el primer ejemplo que proporcionó, y el cursor solo aparecerá cuando el usuario toque o enfoque el TextField.

Comments are closed.