I would like to focus on a DropdownButtonFormField from a TextFormField in Form using FocusScope.of(context).nextFocus()
or FocusScope.of(context).requestFocus(_myNextNode)
.
The problem is that DropdownButtonFormField does not provide focusNode
attribute.
I saw that focusNode
is available in DropdownButton yet.
SampleApp code :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListeTile Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> {
var _formKey = GlobalKey<FormState>();
String dropdownValue = 'One';
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(),
body: Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
),
DropdownButtonFormField(
value: dropdownValue,
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
)
])),
),
);
}
}
Do you know how to do it?
Although DropdownButtonFormField
widget doesn't have focusNode
property, you can wrap this widget with Focus
and a Listener
to achieve the desired result. Sample working code below:
FocusNode _node = new FocusNode();
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(),
body: Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
),
Focus(
focusNode: _node,
onFocusChange: (bool focus) {
setState((){});
},
child: Listener(
onPointerDown: (_) {
FocusScope.of(context).requestFocus(_node);
},
child: DropdownButtonFormField(
value: dropdownValue,
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
iconSize: 50,
style: TextStyle(color: _node.hasFocus ? Colors.black : Colors.white70, fontSize: 24),
hint: Text('Select',
style: TextStyle(color: _node.hasFocus ? Colors.white : Colors.white70),
),
)
)
)]))));
This results in : when you enter some text in textfield
and hit tab then it shifts the focuses on first item in the dropdownbuttonformfield
. Then you can navigate through other items in it using keyboard's tab key. Hitting enter on the highlighted item will make that item selected in the dropdown.
This solution is derived from this discussion.
Hope this answers your question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.