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

Question

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.

If it's the same object, why shouldn't the change in the second screen reflect on the first one? — Axel, Feb 01 '23 at 08:53
Try to put widgetbinding.instance inside the change the object then try it — Rahul Variya, Feb 01 '23 at 08:54
@Axel even if i create a new object and copy the value still its changing, and i dont want to make changes untill user click save button on the second screen — MRazaImtiaz, Feb 01 '23 at 08:54
@rahulVFlutterAndroid no on firstScreen data is coming through streamBuilder (snapshot.data) — MRazaImtiaz, Feb 01 '23 at 12:09
@rahulVFlutterAndroid. i try to used WidgetsBinding.instance .addPostFrameCallback((_) but it did'nt worked — MRazaImtiaz, Feb 01 '23 at 12:17
yes thats the problem , you updated the object in second screen and first screen you running the stream builder — Rahul Variya, Feb 01 '23 at 12:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251546/discussion-between-rahulvflutterandroid-and-mrazaimtiaz). — Rahul Variya, Feb 01 '23 at 12:29

score 1 · Accepted Answer · answered Feb 01 '23 at 09:03

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.

Its work by creating custom method copyWith() but also need to use copyWith inner objects also, but still i will be look for better solution thankyou — MRazaImtiaz, Feb 01 '23 at 12:40

score 1 · Answer 2 · answered Feb 01 '23 at 09:12

1

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

answered Feb 01 '23 at 09:12

Olga

533
2
10

Its work by creating custom method copyWith() but also need to use copyWith inner objects also, but still i will be look for better solution thankyou – MRazaImtiaz Feb 01 '23 at 12:40

score 1 · Answer 3 · answered Feb 01 '23 at 12:52

1

Please update you code after navigation.then method

 template = snapshot.data;

answered Feb 01 '23 at 12:52

Rahul Variya

1,257
1
6
15

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

3 Answers3