Question 74704 in Flutter Question posted in
The official Flutter documentation can be found here.

The TextField does not save the text when returning to the home screen – Flutter

The TextField does not save the text when returning to the home screen, but when the **ElevatedButton** is pressed, it does. I added it for testing because I ran out of ideas. It is very difficult for a beginner to understand what the problem is, thanks in advance for the help.

import 'package:flutter/material.dart';

class BookRead extends StatefulWidget {
  String nameScreen;
  BookRead(this.nameScreen);

  @override
  State<BookRead> createState() => _BookReadState();}

class _BookReadState extends State<BookRead> {
  final controllerT = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(widget.nameScreen),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: TextField(
              controller: controllerT,
              maxLines: null,
              expands: true,),),
          ElevatedButton(onPressed: (){Navigator.push(context,
              MaterialPageRoute(builder: (context) => AddTaskScreen()));}, child: Text('test'))],),);
  }}
class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Column(
        children: [Expanded(child: Container())],),);
  }}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The answers directed me to the correct answer, reading the docs and correct controller implementation

    import 'package:flutter/material.dart';
class BookRead extends StatefulWidget {
 String nameScreen;
 BookRead(this.nameScreen);  

@override
State<BookRead> createState() => _BookReadState();}

class _BookReadState extends State<BookRead> {

late TextEditingController controllerT;  
static String texts = '';                 

@override
 void initState() {
  controllerT = TextEditingController();
  controllerT.text = texts;  
 super.initState();}

@override            
 void dispose() {
  controllerT.dispose();
 super.dispose();}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Center(
      child: Text(widget.nameScreen),),
  ),
  body: Column(
    children: [
      Expanded(
        child: TextField(
          controller: controllerT,
          maxLines: null,
          expands: true,
          onChanged: (value){           
            texts = value;},),),

  2. 0

    I think you need to clarify again how this works with navigation.

    Imagine you have 3 pages in your app. Page A, B and C.

    You start the app with page A. Page A is placed on a stack. Now you navigate to page B. Page B is placed on the stack, so A and B are stacked on the stack. Now you make your changes on page B in the text field and navigate to page C. Now page A, B and C are on the stack. If you now go back from page C, it will be deleted from the stack with all its changes and you will end up on page B again. Since page B is still on the stack, you see the changes in the text field. If you now navigate back to page A, then page B deletes itself with its changes, so when you navigate back to page B, you will no longer see your changes because the state has deleted itself.

    Login or Signup to reply.
  3. 0

    The reason why the TextField does not save the text when returning to the home screen is that the BookRead widget is a stateful widget, and the state of the widget is not being preserved when navigating back to it from the AddTaskScreen. When a widget is rebuilt, its state is reset, and any changes made to the widget’s state are lost.

    However, when the ElevatedButton is pressed, it navigates to a new screen AddTaskScreen, and the BookRead widget is not rebuilt. Hence, the state of the BookRead widget is preserved, and the controllerT property of TextField continues to hold the text entered by the user.

    To preserve the state of BookRead widget when navigating to and from the AddTaskScreen, we need to use a navigation method that preserves the widget’s state, such as the Navigator.pushReplacement method instead of Navigator.push. When we use Navigator.pushReplacement to navigate to the AddTaskScreen, it replaces the current screen with the new screen, and the BookRead widget’s state is preserved. When we navigate back to the BookRead screen, the state of the BookRead widget is still intact, and the TextField continues to hold the text entered by the user.

    Here’s the modified code that uses Navigator.pushReplacement to navigate to the AddTaskScreen and preserve the state of the BookRead widget:

    import 'package:flutter/material.dart';

class BookRead extends StatefulWidget {
  String nameScreen;
  BookRead(this.nameScreen);

  @override
  State<BookRead> createState() => _BookReadState();
}

class _BookReadState extends State<BookRead> {
  final controllerT = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(widget.nameScreen),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: TextField(
              controller: controllerT,
              maxLines: null,
              expands: true,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => AddTaskScreen()),
              );
            },
            child: Text('test'),
          ),
        ],
      ),
    );
  }
}

class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go back'),
          ),
        ],
      ),
    );
  }
}

    In the modified code, the Navigator.pushReplacement method is used to navigate to the AddTaskScreen. When the user taps on the "test" button, the BookRead widget is replaced with the AddTaskScreen, and the state of the BookRead widget is preserved. When the user taps on the "Go back" button in the AddTaskScreen, it navigates back to the BookRead screen, and the state of the BookRead widget is still preserved, and the TextField continues to hold the text entered by the user.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search