Why I use a function to change a value but it returns a empty value?

[mycar98765]

I am using flutter_riverpod package:

flutter_riverpod: ^2.1.1

I have a value in my state and I have a function that changes its value in my controller.

I use a function in my controller in my widget. However, when I print the value, it returns empty. I've checked my code several times and still can't find where the problem is.

My code:

class EditAbout extends ConsumerStatefulWidget {
  const EditAbout({required this.id, super.key});

  final String id;

  @override
  ConsumerState<EditAbout> createState() => _EditAboutState();
}

class _EditAboutState extends ConsumerState<EditAbout> {
  Future<void> editAbout(AccountScreenController controller, String about) async {
    if (mounted) {
      try {
        await controller.editAbout(about, widget.id);
      } finally {
        context.pop();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final AccountScreenController controller = ref.read(accountScreenController.notifier);
    final AccountScreenState state = ref.watch(accountScreenController);

    debugPrint("state.accountAbout: ${state.accountAbout}");
    debugPrint("state.about: ${state.about}");

    return …
      TextFormField(
        …
        onChanged: (value) {
          controller.updateAccountAbout(account.about);
          controller.updateAbout(value);
        },
      ),
  }

---

class AccountScreenState {
  AccountScreenState({this.accountAbout = "", this.about = "", this.value = const AsyncValue.data(null)});

  final String accountAbout;
  final String about;
  …

  AccountScreenState copyWith({
    String? accountAbout,
    String? about,
    …
  }) {
    return AccountScreenState(
      accountAbout: accountAbout ?? this.accountAbout,
      about: about ?? this.about,
      …
    );
  }
}

---

class AccountScreenController extends StateNotifier<AccountScreenState> {
  AccountScreenController() : super(AccountScreenState());

  void updateAccountAbout(String accountAbout) => state = state.copyWith(accountAbout: accountAbout);
  void updateAbout(String about) => state = state.copyWith(about: about);
}

final accountScreenController = StateNotifierProvider.autoDispose<AccountScreenController, AccountScreenState>((ref) {
  return AccountScreenController();
});

Feel free to leave a comment if you need more information.

Why I use a function to change a value but it returns a empty value? I would appreciate any help. Thank you in advance!

[rrousselGit]

Honestly who knows. Hard to say at a glance

I'd need a complete minimal reproducible example to help. The code looks alright, so I need something I can execute (which is not your entire project),

[mycar98765]

@rrousselGit Ok, I'll share some more code with you. Actually, it's about screen editing. It has a TextField that contains the user's about text. When the user changes the TextField, it updates the user's about and typed about text. The AppBar has a button that is disabled when the about text is the same or empty, otherwise enabled.

[mycar98765]

class EditAbout extends ConsumerStatefulWidget {
  const EditAbout({required this.id, super.key});

  final String id;

  @override
  ConsumerState<EditAbout> createState() => _EditAboutState();
}

class _EditAboutState extends ConsumerState<EditAbout> {
  Future<void> editAbout(AccountScreenController controller, String about) async {
    if (mounted) {
      try {
        await controller.editAbout(about, widget.id);
      } finally {
        context.pop();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final AccountScreenController controller = ref.read(accountScreenController.notifier);
    final AccountScreenState state = ref.watch(accountScreenController);
    final AsyncValue<UserModel> userValue = ref.watch(userProvider(widget.id));

    debugPrint("state.accountAbout: ${state.accountAbout}");
    debugPrint("state.about: ${state.about}");

    return Scaffold(
      appBar: AppBar(
        title: Text("Edit about".hardcoded),
        actions: [
          GenericButton(
            width: MediaQuery.of(context).size.width * 0.25,
            isLoading: false,
            color: AppColors.kPrimaryColor,
            onPressed: state.about.trim() == state.accountAbout || state.about.trim().isEmpty ? null : () async => await editAbout(controller, state.about.trim()),
            child: Icon(Icons.edit, color: state.about.trim() == state.accountAbout || state.about.trim().isEmpty ? Colors.grey : AppColors.kIconColor),
          ),
        ],
      ),
      body: AsyncValueWidget<UserModel>( // Same as userValue.when, just a widget to make it shorter
        value: userValue,
        data: (user) => Padding(
          padding: const EdgeInsets.all(AppSizes.kDefaultPadding),
          child: CustomTextFormField( // Same as TextFormField, just a widget to make it shorter
            initialValue: user.about,
            labelText: "About".hardcoded,
            hintText: "Type your about here...".hardcoded,
            keyboardType: TextInputType.text,
            textInputAction: TextInputAction.next,
            readOnly: false,
            onEditingComplete: state.about.trim() == user.about || state.about.trim().isEmpty ? null : () async => await editAbout(controller, state.about.trim()),
            onChanged: (value) {
              controller.updateAccountAbout(user.about);
              controller.updateAbout(value);
            },
            onSaved: (value) {
              controller.updateAccountAbout(user.about);
              if (value != null) {
                controller.updateAbout(value);
              }
            },
            onFieldSubmitted: (value) {
              controller.updateAccountAbout(user.about);
              controller.updateAbout(value);
            },
          ),
        ),
      ),
    );
  }
}

Let me know if you need more code.