How to make value stay despite leaving the page? - flutter

Question

I am trying to make an edit page for users to update their details. I am able to edit the details. But when I leave the page the values go back to the original value it was before editing. How do I make the value stay?
Here is how the screen looks like -
Screen Picture
I did wrap the values in set state thinking that they would remain after leaving the page but they dont.
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:my_plate/screens/home_screen.dart';
import 'package:my_plate/screens/user_guide_screen.dart';
import 'package:my_plate/widgets/app_drawer.dart';
class EditProfilePage extends StatefulWidget {
static String routeName = '/profile';
#override
_EditProfilePageState createState() => _EditProfilePageState();
}
class _EditProfilePageState extends State<EditProfilePage> {
final myController = TextEditingController();
final myController1 = TextEditingController();
String name = 'carolyn1234';
String email = 'carolyn#gmail.com';
final formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text('Profile'),
backgroundColor: Color(0xff588157),
elevation: 1,
// leading: IconButton(
// icon: Icon(
// Icons.arrow_back,
// color: Colors.white,
// ),
// onPressed: () {
// Navigator.of(context).pushNamed(MainScreen.routeName);
// },
// ),
actions: [
IconButton(
icon: Icon(Icons.library_books_outlined),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserGuideListScreen(),
));
},
),
],
),
body: Container(
padding: EdgeInsets.only(left: 16, top: 25, right: 16),
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Form(
key: formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: ListView(
children: [
Text(
"Profile",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w800),
),
SizedBox(
height: 15,
),
Center(
child: Stack(
children: [
Container(
width: 130,
height: 130,
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Theme.of(context)
.scaffoldBackgroundColor),
boxShadow: [
BoxShadow(
spreadRadius: 2,
blurRadius: 10,
color: Colors.black.withOpacity(0.1),
offset: Offset(0, 10))
],
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://i.postimg.cc/gj4CDtjX/image.png",
))),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 4,
color:
Theme.of(context).scaffoldBackgroundColor,
),
color: Color(0xff588157),
),
child: Icon(
Icons.edit,
color: Colors.white,
),
)),
],
),
),
SizedBox(
height: 35,
),
Text(
'User Details',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
),
SizedBox(height: 10),
Text('Username',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54)),
SizedBox(height: 5),
Container(
child: Text(name),
// margin: const EdgeInsets.all(2.0),
padding: const EdgeInsets.all(10.0),
width: 2000,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey)),
alignment: Alignment.topLeft,
),
SizedBox(height: 10),
Text('Email',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54)),
SizedBox(height: 5),
Container(
child: Text(email),
// margin: const EdgeInsets.all(2.0),
padding: const EdgeInsets.all(10.0),
width: 2000,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey)),
alignment: Alignment.topLeft,
),
SizedBox(
height: 35,
),
Text(
'Edit Details',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
),
SizedBox(
height: 15,
),
TextFormField(
controller: myController,
// initialValue: 'bla123',
// enabled: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
width: 0.0,
),
),
label: Text('Username',
style: TextStyle(color: Colors.black)),
),
validator: (username) {
if (username == null || username.isEmpty)
return 'Field is required.';
else if (username.length < 8)
return 'Please enter a description that is at least 8 characters.';
else
return null;
},
),
SizedBox(
height: 15,
),
TextFormField(
controller: myController1,
// initialValue: 'bla#gmail.com',
// enabled: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff588157),
width: 0.0,
),
),
label:
Text('Email', style: TextStyle(color: Colors.black)),
),
validator: (email) {
if (email == null || email.isEmpty)
return 'Field is required.';
String pattern = r'\w+#\w+\.\w+';
if (!RegExp(pattern).hasMatch(email))
return 'Invalid E-mail Address format.';
return null;
},
),
// DropdownButtonFormField(
// // onChanged: null,
// hint: Text('Female'),
// decoration: InputDecoration(
// label: Text('Gender'),
// ),
// items: [
// DropdownMenuItem(child: Text('Female'), value: 'female'),
// DropdownMenuItem(child: Text('Male'), value: 'male'),
// ],
// onChanged: (String? value) {},
// ),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
final isValidForm = formKey.currentState!.validate();
if (isValidForm) {
setState(() {
name = myController.text;
email = myController1.text;
});
}
setState(() {
// name = myController.text;
// email = myController1.text;
});
},
color: Color(0xff588157),
padding: EdgeInsets.symmetric(horizontal: 30),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text(
"Update Details",
style: TextStyle(
fontSize: 15,
letterSpacing: 2.2,
color: Colors.white),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
showAlertDialog();
// setState(() {
//
//
// // name = myController.text;
// // email = myController1.text;
// });
},
color: Color(0xff588157),
padding: EdgeInsets.symmetric(horizontal: 30),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Text(
"Delete Account",
style: TextStyle(
fontSize: 15,
letterSpacing: 2.2,
color: Colors.white),
),
)
],
)
],
),
),
),
),
drawer: AppDrawer());
}
void showAlertDialog() {
// set up the buttons
Widget cancelButton = TextButton(
child: Text("No", style: TextStyle(color: Color(0xff588157))),
onPressed: () {
Navigator.pop(context);
},
);
Widget continueButton = TextButton(
child: Text("Yes", style: TextStyle(color: Color(0xff588157))),
onPressed: () {
setState(() {
name = '';
email = '';
});
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Account deleted successfully!'),
));
Navigator.pop(context);
},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("AlertDialog"),
content: Text("Are you sure you want to submit this form?"),
actions: [
cancelButton,
continueButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
}