TextField State Management in Flutter - flutter

Question

I am trying to create a note app. I am using a Textfield with a prefixicon and my problem is that if the user types something in the textfield and afterwards picks a date, then the textfield input is getting cleared. Any suggestions ?? Thanks in advance !
Here is tthe full code...
class AddTask extends StatefulWidget {
#override
_AddTaskState createState() => _AddTaskState();
}
class _AddTaskState extends State<AddTask> {
DateTime daytime;
#override
Widget build(BuildContext context) {
String newNoteTitle;
String newNoteText;
String newNoteId = DateTime.now().toIso8601String();
TextEditingController titleController = TextEditingController();
TextEditingController commentController = TextEditingController();
return SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.black12,
title: Text(
'Add a note ',
style: TextStyle(
fontFamily: 'Volkhov',
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 25.0),
textAlign: TextAlign.center,
),
),
backgroundColor: Color(0xff212121),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// SizedBox(
// height: 80,
// ),
Container(
width: 400,
height: 350,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
margin: EdgeInsets.fromLTRB(30, 20, 30, 20),
color: Colors.white12,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: TextField(
maxLength: 20,
maxLines: null,
textAlign: TextAlign.start,
decoration: InputDecoration(
prefixIcon: GestureDetector(
onTap: () {
showDatePicker(
context: context,
initialDate: daytime == null
? DateTime.now()
: daytime,
firstDate: DateTime(1970),
lastDate: DateTime(2100),
).then((date) {
setState(() {
daytime = date;
});
});
},
child: Icon(
Icons.date_range,
color: Colors.deepPurple,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText:
'Enter title or press the icon to select a date',
hintStyle: TextStyle(color: Colors.white),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
),
style: TextStyle(
fontSize: 11.0,
color: Colors.white,
// fontStyle: FontStyle.italic,
),
controller: titleController,
// onChanged: (newtitle) {
// newNoteText = newtitle;
// },
),
),
SizedBox(
height: 30,
),
Padding(
padding: EdgeInsets.all(10),
child: TextField(
maxLines: null,
maxLength: 500,
textAlign: TextAlign.start,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.amber),
),
hintText: 'Comments',
hintStyle: TextStyle(color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple),
),
),
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
// fontStyle: FontStyle.italic,
),
controller: commentController,
// onChanged: (newText) {
// newNoteText = newText;
// },
),
),
],
),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
elevation: 20,
onPressed: () {
Navigator.pop(context);
},
color: Colors.amber,
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
SizedBox(
width: 20,
),
RaisedButton(
elevation: 25,
child: Text(
'Save',
style: TextStyle(color: Colors.black),
),
color: Colors.amber,
onPressed: () {
if (titleController.text.isEmpty && daytime == null) {
newNoteTitle = 'No title';
} else if (titleController.text.isEmpty &&
daytime != null) {
newNoteTitle = DateFormat('yyy/MM/dd').format(daytime);
} else if (titleController.text != null &&
daytime == null) {
newNoteTitle = titleController.text;
} else {
newNoteTitle = titleController.text +
' - ' +
DateFormat('yyy/MM/dd').format(daytime);
}
commentController.text.isEmpty
? newNoteText = 'No comments'
: newNoteText = commentController.text;
// Provider.of<Notes>(context, listen: false).addNote(
DBHelper.insert(
'user_notes',
{
'title': newNoteTitle,
'text': newNoteText,
'id': newNoteId
},
);
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => MainScreen()),
);
},
),
],
)
],
),
),
),
);
}
}
I understand i do something wrong when i set the State on the datepicker...also for the bad code...

Answer 1

Please check this code. You are using same textfield for both work, better you use different textfield.
TextField(
maxLength: 20,
maxLines: null,
textAlign: TextAlign.start,
decoration: InputDecoration(
prefixIcon: GestureDetector(
onTap: () {
showDatePicker(
context: context,
initialDate: daytime == null ? DateTime.now() : daytime,
firstDate: DateTime(1970),
lastDate: DateTime(2100),
).then((date) {
setState(() {
daytime = date;
titleController.text =
daytime.toString() + titleController.text;
});
});
},
child: Icon(
Icons.date_range,
color: Colors.deepPurple,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Enter title or press the icon to select a date',
hintStyle: TextStyle(color: Colors.red),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
),
style: TextStyle(
fontSize: 11.0,
color: Colors.red,
// fontStyle: FontStyle.italic,
),
controller: titleController,
)

Answer 2

Not sure what exactly wrong you are doing in the code, but you can set text externally for that maintain the variable and assign value to titleController.text
setState(() {
daytime = date;
titleController.text = 'Text Message';
});

Answer 3

I am using the controllers in this way, Try out below
final titleController = TextEditingController();
final commentController = TextEditingController();

Answer 4

Try to define your controller out of widget build because when setState works it keeps rebuilding your controller.
TextEditingController titleController = TextEditingController();
TextEditingController commentController = TextEditingController();
Widget build(BuildContext context) {}