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.
1 respuesta
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:
Aquí te dejo más info: https://docs.flutter.dev/cookbook/forms/focus