Image is not getting loaded even after a permanent save - flutter

Question

I am trying to create a profile page where we can select the image from the camera and that image will be set as the profile picture. I am saving the image in the directory I have access to and updating the UI after the image is captured. But when I'm restarting the app the captured image is no longer there and I'm seeing the default placeholder image after every restart. Here is the code for the image picker (using provider):
class ProfileInfoProvider with ChangeNotifier {
// this will hold the image
File? _imageFile;
// this will hold the name
late String _name;
// method to set the profile image
Future<void> setProfileImage({required ImageSource source}) async {
// instantiation image picker
ImagePicker picker = ImagePicker();
// picking the image with the source selected
XFile? pickedImage = await picker.pickImage(source: source);
// if user did pick an image
if (pickedImage != null) {
// converting the pickedImage to the pickedImageFile
File pickedImageFile = File(pickedImage.path);
// getting the image name
String imageName = pickedImage.name;
// getting the locaiton we can store the data in
String dirName = (await getApplicationDocumentsDirectory()).path;
// copying the file to the path
File copiedFile = await pickedImageFile.copy('$dirName/$imageName');
// setting the image
_imageFile = copiedFile;
// notifying the listeners
notifyListeners();
}
}
// setter to set the name
void setName(String name) {
_name = name;
// notifying listeners
notifyListeners();
}
// getter to get the image file
File? get getImageFile {
return _imageFile;
}
// getter to get the name
String get getName {
return _name;
}
}
Here is the drawer where I want the image:
class CustomDrawer extends StatelessWidget {
const CustomDrawer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
// this container is the background of the Drawer
child: Container(
height: double.infinity,
color: Theme.of(context).scaffoldBackgroundColor,
// this columnn will hold the First container that holds the name and the image
child: Column(
children: [
// this container holds the name and the image. Using container for a different background
Container(
width: double.infinity,
height: 200, // the dark background height
color: Theme.of(context).primaryColor,
// safe area to make sure that the content does not overlap with the notification bar
child: SafeArea(
// padding for the column
child: Padding(
padding: const EdgeInsets.all(20.0),
// this holds the actual image and name
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Consumer<ProfileInfoProvider>(
builder: (context, profileInfoPorivder, child) {
return CircleAvatar(
radius: 40,
backgroundColor: Theme.of(context).accentColor,
backgroundImage: profileInfoPorivder.getImageFile ==
null
? AssetImage('assets/images/no_profile.jpg')
: FileImage(profileInfoPorivder.getImageFile!)
as ImageProvider,
);
},
),
Text(
'Dipansh Parmar',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
],
),
),
),
),
// this list view holds different options. Wrapping it inside Expanded to give it the full remaining height
Expanded(
child: ListView(
padding: const EdgeInsets.all(0),
children: [
ListTile(
onTap: () {
Navigator.pushNamed(
context,
EditProfilePage.routeName,
);
},
leading: Icon(
Icons.edit,
color: Colors.white,
size: 20,
),
title: Text(
'Edit profile',
style: TextStyle(color: Colors.white),
),
),
],
),
),
],
),
),
);
}
}
Any help will be appreciated.