Reputation: 56

TextField State Management in Flutter

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...

Upvotes: 0

Answers (4)

Alperen Ekin

Reputation: 318

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) {}

Upvotes: 0

Aamil Silawat

Reputation: 8229

I am using the controllers in this way, Try out below

final titleController = TextEditingController();
final commentController = TextEditingController();

Upvotes: 1

Salim Murshed

Reputation: 1441

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,
      )

Upvotes: 2

Jitesh Mohite

Reputation: 34180

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';
           });

Upvotes: 1

TextField State Management in Flutter

Answers (4)

Related Questions