riverpod icon indicating copy to clipboard operation
riverpod copied to clipboard

send ref.watch(StateProviderNotifier.notifier).handle(items) as arguments

Open SaddamMohsen opened this issue 8 months ago • 1 comments

Hello, everyone I would like to thank you, @rrousselGit, for your incredible package. I appreciate all of your work on Flutter, and I am new to the framework and Riverpod and have a stupid question.

My question is about how to perform a side effect using a reusable widget. Here is the code from documentation:

`class UpdateButton extends ConsumerStatefulWidget {
  const UpdateButton({super.key, required this.provider});
  final StateNotifierProvider provider;
   @override
  ConsumerState<ConsumerStatefulWidget> createState() => _UpdateButtonState();
}

class _UpdateButtonState extends ConsumerState<UpdateButton> {
  // The pending addTodo operation. Or null if none is pending.
  Future<void>? _pendingAddOutItems;
  
  @override
  Widget build(BuildContext context) {
          return FutureBuilder(
      // We listen to the pending operation, to update the UI accordingly.
      future: _pendingAddOutItems,
      builder: (context, snapshot) {
        // Compute whether there is an error state or not.
        // The connectionState check is here to handle when the operation is retried.
        final isErrored = snapshot.hasError &&
            snapshot.connectionState != ConnectionState.waiting;
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          style: ButtonStyle(
            // If there is an error, we show the button in red
            backgroundColor: MaterialStateProperty.all(
              isErrored ? Colors.red : null,
            ),
          ),
          onPressed: () {
            // We keep the future returned by addTodo in a variable
            final future = widget.provider
           
            setState(() {
              _pendingAddOutItems = future;
            });
          },
          child: const Text('حفظ البيانات'),
        ),
        // The operation is pending, let's show a progress indicator
        if (snapshot.connectionState == ConnectionState.waiting) ...[
          const SizedBox(width: 8),
          const CircularProgressIndicator(),
        ]
      ],
    );
  },
);

} }`

I want to make the previous code able to be used with any provider. so i can make the request like this from other widget

UpdateButton(provider:ref.read(insertOutItemControllerProvider.notifier).handle(newItem)),

i tried to make this

`class UpdateButton extends ConsumerStatefulWidget {
  const UpdateButton({super.key, required this.future});
  final Future<void>? future;
.....................
}
class _UpdateButtonState extends ConsumerState<UpdateButton> {
  // The pending addTodo operation. Or null if none is pending.
  Future<void>? _pendingAddOutItems;
@override
  void initState() {
    // TODO: implement initState
  _pendingAddOutItems = widget.future;
    super.initState();
  }  

// then from other widget i call this UpdateButton(future:ref.read(insertOutItemControllerProvider.notifier).handle(newItem)), ` it is worked but the problem was the UpdateButton widget build before get the newItem from other widget and send to the provider an empty list

so if there is anyway to make the UpdateButton reusable with other provider to make side effect like this in documentation https://deploy-preview-2740--river-pod.netlify.app/docs/essentials/side_effects#going-further-showing-a-spinner--error-handling sorry for my bad english and thank in advance for help

SaddamMohsen avatar Oct 31 '23 18:10 SaddamMohsen