0

Tengo un TextField que estoy usando como buscador. Quisiera saber si se puede hacer que al momento de hacer tap en el TF se cambie el fondo y muestre una lista de elementos que estoy buscando. Si no me explico bien, seria algo asi, que pase de la imagen 1 a la imagen 2.

Imagen 1í

Imagen 2

1 respuesta 1

1

Se puede hacer de una forma muy sencilla con el FocusNode, el focusNode va asignado al TextField si lo escuchas, puedes saber cuando se hizo foco sobre el TextField o también cuando se perdió el foco.

Aquí un ejemplo:

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

  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  final _focusInput = FocusNode();

  @override
  void initState() {
    _focusInput.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    _focusInput.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Positioned.fill(
              // This is your Map
              child: Container(
                color: Colors.lightBlue,
                child: const Center(
                  child: Text('Map here'),
                ),
              ),
            ),
            Positioned.fill(
              child: AnimatedSwitcher(
                child: _focusInput.hasFocus
                    ? const SearchScreen()
                    : const SizedBox.shrink(),
                duration: const Duration(seconds: 1),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                focusNode: _focusInput,
                decoration: const InputDecoration(
                  hintText: 'Address',
                  fillColor: Colors.white,
                  filled: true,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
    );
  }
}

Aquí se escucha el cambio de foco

 _focusInput.addListener(() {
      setState(() {});
    });

Y en la Ui se valida cuando mostrar la vista de búsqueda, usando AnimatedSwitcher para que tenga una transición animada.

Resultado:

introducir la descripción de la imagen aquí

Aquí te dejo más info: https://docs.flutter.dev/cookbook/forms/focus

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.