Flutter - Show Dialog NumberPicker on Tap TextFormField

Question

The problem is simple: I need to show numberpickerdialog when i click in form field. Then i need to asign numberpicker value to field.

FORM FIELD

 final maxValue = new GestureDetector(
 onTap: () {
 print("entra");
 _showDialog(context);
 },
 child: TextFormField(
 //controller: inputMaxValue,
 decoration: InputDecoration(
 hintText: DemoLocalizations.of(context).trans('value-meter-max'),
 focusedBorder: UnderlineInputBorder(
 borderSide: BorderSide(color: Colors.blue[300], width: 2.5),
 ),
 )),
 );

DIALOG

 void _showDialog(context) {
 showDialog<double>(
 context: context,
 builder: (BuildContext context) {
 return new NumberPickerDialog.decimal(
 minValue: 1,
 maxValue: 10,
 title: new Text("Pick a new price"),
 initialDoubleValue: _currentPrice,
 );
 }
 ).then((double value) {
 if (value != null) {
 setState(() => _currentPrice = value);
 }
 });
 }

The problem: When i click field dialog doesn ́t show: How can i launch showDialog when i click in this field?

Answer 1

I recreated your case and noticed that the issue could be due to TextFormField used. Ideally, a TextFormField should only be used to edit a text because we are clicking on it anyway which enables the field with cursor. If we are wrapping it with GestureDetector, we are trying to tap on it again which could be conflicting with the click event. I would rather use InputDecorator and wrap it with GestureDetector. Here's a working example of it which opens a dialog:

 @override Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: GestureDetector(
 child: InputDecorator(
 decoration: InputDecoration(
 labelText: 'Test'
 ),
 ),
 onTap: () {
 _showDialog();
 },
 )
 )
 );
 }
 void _showDialog() {
 // flutter defined function
 showDialog(
 context: context,
 builder: (BuildContext context) {
 // return object of type Dialog
 return AlertDialog(
 title: new Text("Alert Dialog title"),
 content: new Text("Alert Dialog body"),
 actions: <Widget>[
 // usually buttons at the bottom of the dialog
 new FlatButton(
 child: new Text("Close"),
 onPressed: () {
 Navigator.of(context).pop();
 },
 ),
 ],
 );
 },
 ); }

enter image description here