UI not updating properly

[huzzi]

Hello,

I have a switch widget when I slide it for example from OFF > ON it goes ON > OFF > ON on the UI.

Why is this behavior? Please help.

Provider

final profileProvider = StateNotifierProvider<ProfileUserNotifier, AsyncValue<ProfileUser>>((ref) {
  return ProfileUserNotifier(ref.read);
});

State notifier

class ProfileUserNotifier extends StateNotifier<AsyncValue<ProfileUser>> {
  ProfileUserNotifier(
    this.read, [
    AsyncValue<ProfileUser>? profileUser,
  ]) : super(profileUser ?? const AsyncValue.loading()) {
    _getProfileUser();
  }

  final Reader read;

  Future<void> _getProfileUser() async {
     state = AsyncValue.loading();
      final profile = await read(apiServiceProvider)!.getProfile();
      state = AsyncValue.data(profile!);
  }

 refresh(ProfileUser profile) {
      state = AsyncValue.loading();
      state = AsyncValue.data(profile);
  }
}

Screen

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Account Settings'),
      ),
      body: Consumer(builder: (context, ref, child) {
        var profile = ref.watch(profileProvider);

        return profile.when(
          loading: () => Container(
              child: Scaffold(
                  body: Center(child: const CircularProgressIndicator()))),
          error: (err, stack) => Text('Error $err'),
          data: (profile) => SwitchListTile(
            value: profile.visible!,
            onChanged: (bool value) {
              var updatedProfile = profile.copyWith(visible: value);
              ref.read(apiServiceProvider)!.updateUser(updatedProfile).then(
                  (profileUser) => {
                        ref.read(profileProvider.notifier).refresh(profileUser)
                      });
            },
            title: new Text(
              'Visible',
              style: new TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold),
            ),
          ),
        );
      }),
    );
  }

Model

@immutable
class ProfileUser {
  ProfileUser({this.id, this.username, this.visible});

  final int? id;
  final String? username;
  final bool? visible;

  ProfileUser copyWith({int? id, String? username, bool? visible}) {
    return ProfileUser(
      id: id ?? this.id,
      username: username ?? this.username,
      visible: visible ?? this.visible,
    );
  }
}

[huzzi]

Got it working by updating the state then calling the api