Flutter, prevent the keyboard from showing once the time is entered - flutter

Question

I would like to prevent the keyboard from showing once the time is entered, how could I do it?
Updated
I tried using FocusScope.of(context).unfocus(); and it works for the first try, but it doesn't for the second one. It's kinda weird. Look at this.
The first works, the second doesn't work, but the third works, also noticed that the keyboard show up even before than the TimePicker is showed. (Sorry for my bad english)
this is the code;
TextEditingController _startTime = TextEditingController();
Widget _createTimePicker(String text, TextEditingController controller) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
text,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'Es necesario especificar una hora.';
}
},
controller: controller,
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true),
onTap: () {
Navigator.of(context).push(
showPicker(
context: context,
value: _time,
onChange: onTimeChanged,
is24HrFormat: true,
),
);
FocusScope.of(context).unfocus();
},
)
],
),
);
}
TimeOfDay _time = TimeOfDay.now().replacing(minute: 30);
void onTimeChanged(TimeOfDay newTime) {
setState(() {
_time = newTime;
_startTime.text = _time.format(context);
});
}

Answer 1

You can copy paste run 2 full code below
Solution 1: Quick fix for current code
You can use Future.delayed and FocusManager.instance.primaryFocus.unfocus
onTap: () async {
Navigator.of(context).push(
showPicker(
context: context,
value: _time,
onChange: onTimeChanged,
is24HrFormat: true,
),
);
await Future.delayed(Duration(milliseconds: 50), () {
FocusManager.instance.primaryFocus.unfocus();
});
})
Solution 2: Assume you do not need keyboard to show up all the time
You can use GestureDetector wrap TextFormField and set enable to false
GestureDetector(
onTap: () async {
Navigator.of(context).push(
showPicker(
context: context,
value: _time,
onChange: onTimeChanged,
is24HrFormat: true,
),
);
},
child: TextFormField(
enabled: false,
working demo 1
working demo 2
full code 1
import 'package:day_night_time_picker/lib/daynight_timepicker.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController _startTime = TextEditingController();
final _formKey = GlobalKey<FormState>();
Widget _createTimePicker(String text, TextEditingController controller) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
text,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
TextFormField(
//enabled: false,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
controller: controller,
decoration: InputDecoration(
errorStyle: TextStyle(color: Colors.red),
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true),
onTap: () async {
Navigator.of(context).push(
showPicker(
context: context,
value: _time,
onChange: onTimeChanged,
is24HrFormat: true,
),
);
await Future.delayed(Duration(milliseconds: 200), () {
FocusManager.instance.primaryFocus.unfocus();
});
})
],
),
);
}
TimeOfDay _time = TimeOfDay.now().replacing(minute: 30);
void onTimeChanged(TimeOfDay newTime) {
setState(() {
_time = newTime;
_startTime.text = _time.format(context);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_createTimePicker("", _startTime),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {}
},
child: Text('Submit'),
)
],
),
),
),
);
}
}
full code 2
import 'package:day_night_time_picker/lib/daynight_timepicker.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController _startTime = TextEditingController();
final _formKey = GlobalKey<FormState>();
Widget _createTimePicker(String text, TextEditingController controller) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
text,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
GestureDetector(
onTap: () async {
Navigator.of(context).push(
showPicker(
context: context,
value: _time,
onChange: onTimeChanged,
is24HrFormat: true,
),
);
},
child: TextFormField(
enabled: false,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
controller: controller,
decoration: InputDecoration(
errorStyle: TextStyle(color: Colors.red),
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true),
),
)
],
),
);
}
TimeOfDay _time = TimeOfDay.now().replacing(minute: 30);
void onTimeChanged(TimeOfDay newTime) {
setState(() {
_time = newTime;
_startTime.text = _time.format(context);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_createTimePicker("", _startTime),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {}
},
child: Text('Submit'),
)
],
),
),
),
);
}
}

Answer 2

on the callback function of the time selection dismiss the keyboard
FocusScope.of(context).unfocus();

Answer 3

if this field is only editable through the time picker, you can make the text field read-only by setting its attribute
readOnly: true
if the field can be edited by keyboard, then you can await for the dialog result and then call
FocusScope.of(context).requestFocus(new FocusNode());

Answer 4

After set time to TextInput or on confirm time select, call this FocusScope.of(context).unfocus() function.
// update your function
void onTimeChanged(TimeOfDay newTime) {
FocusScope.of(context).unfocus();
...
}
and,
TextFormField(
readOnly: true,
...
)