Flutter: Selected logo not updating on screen reload despite correct file overwrite

Question

When I click the "Edit" button and select a new logo, the selected logo is immediately displayed on the screen. After clicking the "Submit" button, the logo gets copied to the desired location correctly.

However, when I go back and relaunch the screen, the previously selected logo (the old one) is shown instead of the new one. If I select another logo and click "Submit," the new logo is displayed, but again, when I go back and relaunch the screen, the first selected logo appears, even though the correct logo file is saved in the directory.

Here is my code

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart'; // To get the file location
import 'package:file_picker/file_picker.dart'; // For file picking
import 'dart:io'; // For file operations

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Ensure MaterialApp wraps the entire app
      home: MainScreen(), // Set MainScreen as the initial screen
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(),
              ),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  bool isEditing = false; // Tracks if the user is in edit mode
  File? _logoFile; // Holds the selected logo image file

  @override
  void initState() {
    super.initState();
    loadDetails(); // Load details when the screen initializes
  }

  // Load details from a text file
  Future<void> loadDetails() async {
    final directory = await getApplicationDocumentsDirectory();
    var logoFile;
    setState(() {
      logoFile = File('${directory.path}/sbs/logo.png');
    });

    if (await logoFile.exists()) {
      setState(() {
        _logoFile = logoFile;
      });
    }
  }

  // Save details to a text file
  Future<void> saveDetails() async {
    final directory = await getApplicationDocumentsDirectory();

    if (!await Directory('${directory.path}/sbs').exists()) {
      await Directory('${directory.path}/sbs').create(recursive: true);
    }

    if (_logoFile != null) {
      final logoDestination = File('${directory.path}/sbs/logo.png');
      await _logoFile!.copy(logoDestination.path);
    }
    print("Logo saved to ${directory.path}/sbs/logo.png");
  }

  // Function to select a logo image file
  Future<void> _pickLogo() async {
    _logoFile = null;
    FilePickerResult? result =
        await FilePicker.platform.pickFiles(type: FileType.image);

    if (result != null) {
      setState(() {
        _logoFile = File(result.files.single.path!);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Image picker"),
        backgroundColor: Colors.teal,
      ),
      body: SingleChildScrollView(
        // Wrap the Column with SingleChildScrollView
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Display selected logo if available
              if (_logoFile != null)
                Image.file(_logoFile!, height: 150, width: 150)
              else
                Text("No logo selected"),

              ElevatedButton(
                onPressed:
                    isEditing ? _pickLogo : null, // Disable if not editing
                child: Text("Select Logo"),
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        // Toggle edit mode
                        isEditing = true;
                      });
                    },
                    child: Text("Edit"),
                  ),
                  SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: isEditing
                        ? () {
                            // Save the details and disable editing
                            saveDetails();
                            setState(() {
                              isEditing = false;
                            });
                          }
                        : null,
                    child: Text("Submit"),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.teal,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here is a video demonstrating the issue. link