Changes in Object from Second Screen is also Changing the Value in First Screen in flutter dart-CodePudding

A class Object passing from First Screen to the second Screen While on the second screen when the object changed its value, it's also changing the value on first screen.

Code of First Screen. (widget.templateModel is an object class that i am passing to the second screen)

Navigator.push(context,MaterialPageRoute(builder: (context) =>
EditEmojiTextTemplateScreen(templateModel: widget.templateModel,));

Code of Second Screen (On the second screen i am receiving the object and when i am changing the value of widget.templateModel it also changing the value on the first screen for a simple understandable code below i changed the value in initState while in the gif i am changing value in TextFormField)

class EditEmojiTextTemplateScreen extends StatefulWidget {
  final TemplateModel templateModel;
  EditEmojiTextTemplateScreen({
    Key? key,
    required this.templateModel,
  }) : super(key: key);

  @override
  State<EditEmojiTextTemplateScreen> createState() =>
      _EditEmojiTextTemplateScreenState();
}

class _EditEmojiTextTemplateScreenState
    extends State<EditEmojiTextTemplateScreen> {
  final SharedPreferences sharedPreferences = sl();
  var txtNameController = TextEditingController();
  var txtColorController = TextEditingController();



  _EditEmojiTextTemplateScreenState();
  @override
  void initState() {
    widget.templateModel.emoji[0].titleTwo = "kdfff"; //here i am changing the value and it also changing the value on first screen and i dont want this behavior of this object
   

    super.initState();
  }

Note: This is happening because of widget variable as mentioned in the documentation but i don't know how to prevent this behavior.

package:flutter/src/widgets/framework.dart

The current configuration.

A [State] object's configuration is the corresponding [StatefulWidget] instance. This property is initialized by the framework before calling [initState]. If the parent updates this location in the tree to a new widget with the same [runtimeType] and [Widget.key] as the current configuration, the framework will update this property to refer to the new widget and then call [didUpdateWidget], passing the old configuration as an argument.

CodePudding user response：

Now I see what you are trying to do. You could initialize a NEW istance of TemplateModel in the InitState of the second screen.

Then, set the new object's properties like this (or write a cleaner method to do that):

newObject.property1 = oldObject.property1;
newObject.property2 = oldObject.property2;
...

Once the user presses the save button, change oldObject's properties again, so that the first page updates.

You might want to take a look at state management to better understand how to approach this kind of problems.

CodePudding user response：

As the other answer suggests, take a look at state management solutions. Also keep the models immutable by creating them with final fields. Then to modify, create new instances via copyWith()

CodePudding user response：

Please update you code after navigation.then method

 template = snapshot.data;