A focusable and blurable TextField widget
Flutter Focus Widget
A focusable and blurable widget of use the FocusNode.
-
When the FocusWidget had focus
Tap this FocusWidget outside area
Will call the FocusNode's unfocus method and trigger the FocusNode's listener
class _MyHomePageState extends State<MyHomePage> {
final FocusNode _address = FocusNode(), _name = FocusNode();
@override
Widget build(BuildContext context) {
final language = DemoLocalizations.of(context);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: Drawer(
child: SafeArea(
child: ListView(
padding: EdgeInsets.only(left: 10, right: 10),
children: [
FocusWidget.builder(
context,
(ctx, focusNode) => TextField(
focusNode: focusNode,
autofocus: true,
decoration: InputDecoration(
hintText: 'Input 1',
labelText: 'Input 1',
),
),
)
],
),
),
),
body: SingleChildScrollView(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 100,
child: FocusWidget(
focusNode: _address,
child: TextField(
focusNode: _address,
decoration: InputDecoration(
hintText: 'Input 2', labelText: 'Input 2'),
),
),
),
FocusWidget(
focusNode: _name,
child: TextField(
focusNode: _name,
decoration: InputDecoration(
hintText: 'Input 3', labelText: 'Input 3'),
),
),
SizedBox(
height: 1000,
),
],
),
),
);
}
}