Dynamic text field data will missing when key in another text field

Question

I want to create a Dynamic text field for user add the information.
But I don't know why if the user key in something input in room page first

Then go to Floor page and input

Back to the room page and the key in data will missing.

I want to know that how to prevent Dynamic text field data missing. Thanks a lot.

Here is the sources code This is the Tab page:

import "package:flutter/material.dart";
import './tab1.dart';

class TabPage extends StatefulWidget {
  @override
  _TabPage createState() => _TabPage();
}

class _TabPage extends State<TabPage> with SingleTickerProviderStateMixin {
    TextEditingController doorNumberController = new TextEditingController();
  List<Widget> _checkingForm = <Widget>[];
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Room'),
    Tab(text: 'Floor'),
  ];

  int _checkingIndex = 1;
  void _addChecking() {
    _checkingForm = List.from(_checkingForm)
      ..add(Tab1());

    setState(() {
      _checkingIndex += 1;
    });
  }

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
    _addChecking();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
            children: [
              ListView(
                children: <Widget>[  
                  Text('Add the room number',textAlign: TextAlign.center,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                  ),
                  IconButton(
                    icon: Icon(Icons.add_circle,color: Colors.lightBlue),
                    onPressed: () {
                        _addChecking();
                      },
                    ),   
                    Column(
                      children:_checkingForm,
                  ),     
                ]
              ),
              ListView(
                  children: <Widget>[
                    Text('Floor:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Floor:',
                          ),
                        ),
                      ),  
                    ]
              ),
            ]
      ),
    );
  }
}

This is the Dynamic text field page:

import 'dart:convert';
import 'package:http/http.dart' as http;
import "package:flutter/material.dart";

class Tab1 extends StatefulWidget {
  _Tab1 createState() => _Tab1();
  
}

class _Tab1 extends State<Tab1> {
  TextEditingController doorNumberController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
      return Card(
        child: Column(
          children: <Widget>[
                Row( 
                  children: <Widget>[
                    Text('Room:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Room number:',
                          ),
                        ),
                      ),  
                    ]
                  ),
          ]
        )
      );
  }

}

I think you can try this answer https://stackoverflow.com/a/51225319/13068292 — Aldy Yuan, Dec 07 '20 at 04:53
Your `Tab` object is being destroyed and recreated when you move between tabs. You need to implement a state management solution or simply use @AldyYuan's suggestion. — Lee3, Dec 07 '20 at 05:21

score 1 · Accepted Answer · answered Dec 07 '20 at 06:27

The solution is very simple...... Just add with AutomaticKeepAliveClientMixin<Tab1> and bool get wantKeepAlive => true; can be solve.
Thanks Aldy.

import 'dart:convert';
import 'package:http/http.dart' as http;
import "package:flutter/material.dart";

class Tab1 extends StatefulWidget {

  String input;
  @override
  _Tab1 createState() => _Tab1();
  
}

class _Tab1 extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
  TextEditingController doorNumberController = new TextEditingController();
  void initState() {
    super.initState();
    //doorNumberController.text=input;
  }
  @override
  Widget build(BuildContext context) {
      return Card(
        child: Column(
          children: <Widget>[
                Row( 
                  children: <Widget>[
                    Text('Room:', textAlign: TextAlign.left,style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w900,
                      fontSize: 25),
                    ),
                      Container(              
                            width: 250.0,
                            child: TextField(
                              controller: doorNumberController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Room number:',
                          ),
                        ),
                      ),                  
                    ]
                  ),
                Row(
                  children:<Widget>[
                    IconButton(
                      icon: const Icon(Icons.save),
                      color: Colors.blue,
                        onPressed: () {
                          print(doorNumberController.text);
                      },
                    ),      
                  ]
                ) 
          ]
        )
      );
  }
  bool get wantKeepAlive => true;
}

Dynamic text field data will missing when key in another text field

1 Answers1