Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Why in Flutter, when I go to another page, the text in TextField disappears?

I enter text in TextField. When I click a button to go to another page and back, the text in the TextField disappears. Has anyone encountered this problem and can give me some advice?

My code:

Column(
  children: [
    ListTile(
      onTap: () async {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) => …)); // In fact, I used go_router, just replaced it with the Navigator that everyone should know
      },
      leading: const Icon(Icons.location_pin, color: Colors.black),
      title: Text("Location"),
    ),
    ListTile(
      leading: const Icon(Icons.message, color: Colors.black),
      title: TextFormField(
        controller: messageController,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Message",
        ),
      ),
    ),
  ],
),

Feel free to leave a comment if you need more information.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Why in Flutter, when I go to another page, the text in TextField disappears? I would appreciate any help. Thank you in advance!

>Solution :

This is because you create the TextEditingController when you navigate to this page so it will be created with empty text.
So you can make the controller global not inside StatefulWidget.

import 'package:flutter/material.dart';

class SearchScrean extends StatefulWidget {
  const SearchScrean({super.key});

  @override
  State<SearchScrean> createState() => _SearchScreanState();
}

class _SearchScreanState extends State<SearchScrean> {
  // you probably initialize the controller here or in initState.
  TextEditingController messageController = TextEditingController(); 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        TextFormField(
          controller: messageController,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Message",
          ),
        ),
      ]),
    );
  }
}

See the comment.
You have to initialize it outside like this or use a state management package like bloc or provider :

import 'package:flutter/material.dart';

// initialize it here or in another global file
TextEditingController messageController = TextEditingController(); 

class SearchScrean extends StatefulWidget {
  const SearchScrean({super.key});

  @override
  State<SearchScrean> createState() => _SearchScreanState();
}

class _SearchScreanState extends State<SearchScrean> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        TextFormField(
          controller: messageController,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Message",
          ),
        ),
      ]),
    );
  }
}

and when you don’t want it anymore dispose it using messageController.dispose()

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading