如何在 initState 中使用 Riverpod 提供程序

Question

I use Riverpod as state management in my web app. I am trying to build an AppBar that scrolls automatically to certain parts of a ListView.

I created a ScrollController as a provider for this purpose.

final scrollControllerProvider = StateProvider<ScrollController?>((ref) => ScrollController());

To scroll, I use .animateTo from the AppBar actions.

ref.read(scrollControllerProvider)!.animateTo(
  0,
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

The scrolling works, but it throws an exception

The provided ScrollController is currently attached to more than one ScrollPosition.

I have read that I should be using a StatefulWidget. However, using a ConsumerStatefulWidget I can't create the ScrollController using Riverpod, because I need to initiate it in initState() and I can't access to a provider from it. Is possible to have these two elements together?

Answer 1

class MyClass extends ConsumerStatefulWidget {
  const MyClass({Key? key}) : super(key: key);

  @override
  ConsumerState<MyClass> createState() => _MyClassState();
}

class _MyClassState extends ConsumerState<MyClass> {
  
  late ScrollController _scrollController;
  
  @override
    void initState() {
      super.initState();
      _scrollController = ScrollController();
    }
  
  @override
  Widget build(BuildContext context) {
    final status = ref.watch(someProvider);
    return ListView(
      controller: _scrollController,
    );
  }
}

Answer 2

You have access to ref inside any function that resides in the ConsumerStatefulWidget . So, you can simply call your provider in initState() function and it should behave normally

...
  class _MyClassState extends ConsumerState<MyClass> {

  late ScrollController _scrollController;
  
  @override
    void initState() {
      super.initState();
      _scrollController = ref.watch(scrollControllerProvider); // Doesn't throw error
    }
...