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

Time:12-24

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.

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

CodePudding user response:

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

  • Related