Flutter Web: Horizontal Scrollbar not shown upon load (only by scrolling) and will vanish after window resize

74 Views Asked by At

I can't make the horizontal scrollbar visible from page build. i.e. I need the horizontal scrollbar to be visible from the moment is loaded. It only appears after some horizontal scrolling but I can't rely on the users having the necessary hardware. Also the keyboards keys "left and right" are not working on this "PaginatedDataTable" widget, the table overflows horizontally and the user should be able to scroll horizontally through the paginated table. The table also should be scrollable vertically when the number of "stories" is elevated to 20, 30, 40, etc. I tried different approaches, like using SingleChildScroll view and third party libraries but nothing seems to work. Another issue is that when the scrollbar is visible and the window is resized, then it disappears. Using the LayoutBuilder didn't help in this case. Any ideas/good practices for this issue? Thanks! enter image description here

 final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<StoryBloc, StoryState>(
        builder: (context, state) {
          switch (state.status) {
            case StoryStatus.loading:
              context.loaderOverlay.show();
              break;
            case StoryStatus.failure:
              context.loaderOverlay.hide();
              break;
            case StoryStatus.updateFailure:
            case StoryStatus.updateSuccess:
            case StoryStatus.success:
              context.loaderOverlay.hide();
              final _StoryDataSource storyDataSource =
                  _StoryDataSource(this.context, state.stories);
              return ListView(
                children: [
                  Theme(
                    data: Theme.of(context)
                        .copyWith(dividerColor: AppTheme.white),
                    child: Scrollbar(
                      controller: _scrollController,
                      thumbVisibility: true,
                      child: PaginatedDataTable(
                        controller: _scrollController,
                        showFirstLastButtons: true,
                        showCheckboxColumn: true,
                        onSelectAll: (bool? value) {
                          storyDataSource._selectAll(value);
                        },
                        header: Text(
                          AppLocalizations.of(context)!.stories_storiesName,
                        ),
                        rowsPerPage: _rowsPerPage!,
                        columns: [
                          DataColumn(
                            label:
                                Text(AppLocalizations.of(context)!.common_edit),
                          ),
0

There are 0 best solutions below