Widgets & Design
M
Marco

Using components in custom widgets

Hi there,

I am using a custom widget that is supposed to act as a wrapper for a list view that is able to save its scroll position when changing the page in a pageview. So basically I have a listview inside a pageview that should retain it's scroll position.

I've been tinkering with this for days and while I had no problem compiling the projects, yesterday I suddenly couldn't compile them any more. The problem is with the import of the component, which stopped working: import '[/pages/comps/reference_to_some_component_created_in_editor];

This way of referencing a component I created in the editor worked fine for days, but now it doesn't. I get the following error:

Target of URI doesn't exist: '[/pages/comps/reference_to_some_component_created_in_editor]'. Try creating the file referenced by the URI, or try using a URI for a file that does exist.

Does anyone have any idea why this has stopped working or perhaps a solution as to what I can do to wrap my component in my custom widget?

Here is the custom widget if anyone is interested. It kept the scrolling position, but I had this annoying bug where it would still refresh inner components like textfields which would trigger their initial animation every time a change happened inside the scrolling widget.

import '[/pages/comps/reference_to_some_component_created_in_editor];

class SaveScrollPositionListViewWrapper extends StatefulWidget {
  const SaveScrollPositionListViewWrapper({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  _SaveScrollPositionListViewWrapperState createState() =>
      _SaveScrollPositionListViewWrapperState();
}

class _SaveScrollPositionListViewWrapperState
    extends State<SaveScrollPositionListViewWrapper> {
  ScrollController? _scrollController;

  @override
  void initState() {
    super.initState();
    // Initialize the scroll controller and attempt to restore the scroll position
    _scrollController = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback((_) => _restoreScrollPosition());
  }

  @override
  void dispose() {
    _scrollController?.dispose();
    super.dispose();
  }

  void _restoreScrollPosition() {
    // Restore the scroll position from the PageStorage
    final PageStorageBucket? bucket = PageStorage.of(context);
    final double? offset = bucket?.readState(context, identifier: const PageStorageKey('cookingFlowCompKey'));
    if (offset != null) {
      _scrollController?.jumpTo(offset);
    }
  }

  void _saveScrollPosition() {
    // Save the current scroll position to the PageStorage
    PageStorage.of(context)?.writeState(context, _scrollController?.offset, identifier: const PageStorageKey('cookingFlowCompKey'));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            //// HERE THE COMPONENT IS PLACED
          ].divide(const SizedBox(height: 15.0)),
        ),
      ),
    );
  }
}

1
2 replies