Flutter - CircleAvatar not updating

Question

I have this home screen where the user profile image is shown and in settings screen the user is able to change that image. The problem is that when going back from settings to home screen the image doesn't update.

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  late User _user;
  String _userImage = "";

  @override
  void initState() {
    super.initState();
    _user = _firebaseAuth.currentUser!;
    _userImage = _user.photoURL!;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        actions: [
          Tooltip(
            message: "Settings",
            child: IconButton(
              onPressed: () async {
                await Navigator.pushNamed(context, routeSettings);
                setState(() {
                  _userImage = _user.photoURL!;
                  print("changed: $_userImage");
                });
              },
              icon: Icon(Icons.settings_rounded),
            ),
          ),
          CircleAvatar(
            backgroundColor: kBrownColor,
            backgroundImage:
                _userImage.isNotEmpty ? NetworkImage(_userImage) : null,
            child: _userImage.isEmpty
                ? Text(
                    getInitials(_user.displayName!),
                    style: TextStyle(
                      color: kWhiteColor,
                    ),
                  )
                : null,
          ),
        ],
      ),
    );
  }
}

I'm getting the url of the image in the console when printing it inside setState() when going back to this screen but the CircleAvatar doesn't load it.

Answer 1

pass parameter when pop() from setting screen

   onTap: () => Navigator.of(context).pop({
      'avatar': 'image_url',
   }),

and button in HomeScreen

        IconButton(
          onPressed: () async {
            var data = await Navigator.pushNamed(context, routeSettings);
            setState(() {
              _userImage = data['avatar'];
            });
          },
          icon: Icon(Icons.settings_rounded),
        ),

Answer 2

?f you are reaching to settings page without deleting the homepage from memory it won't change automatically since it just draws another screen on top of another. So the init state won't work again after you update the image on the settings page. There are multiple solutions for this but the easiest as I see would be clearing all stacks and inserting the homepage again. To clear stack you may use Navigator.pushAndRemoveUntil().

With named route

  Navigator.pushNamedAndRemoveUntil(context, '/home', (route) => false);

Without named route

  Navigator.pushAndRemoveUntil(context,
      MaterialPageRoute(builder: (context) => Home()), (route) => false);

This should do the trick.