[web] Add support for spacebar Shortcut to include ScrollIntent

I am building web pages with Flutter Web and the widget layout is as follows.

Scaffold(
   body: SingleChildScrollView(
      child: Column(
          children: <Widget>[
              // page widgets

All of my widgets that build the content of the page are the children of the column. Scrolling works fine if I use my trackpad or click on the page and drag (which makes sense because this is how mobile applications scroll). I understand it is currently working as it was designed for mobile. However, there is no scroll bar on the side of the page as there normally would be with any other website. Since we can only make webpages scrollable by using nested scrollable widgets like SingleChildScrollView, there should be a way to recognize nested SingleChildScrollViews that hold the body of the webpage as being scrollable with a website scroll bar so that functions such as scrolling by pressing spacebar, page up/page down, up/down arrow keys or by using a side scroll bar are possible.

Don't know how this will be addressed but I have a suggestion for a way it could. You could set a boolean property on scrollable widgets such as "ContainsWebpageBody" that is by default set as false and is an optional parameter. When changing this value to true, the scrollable widget gets a scrollbar on the right side to mimic a webpage scrollbar and gets the functionality of webpage scrolling that includes scrolling by pressing spacebar, page up/page down, up/down arrow keys.

Please also extend this functionality to widgets like PageView. I am sure this can apply other types of widgets as well.

This is a feature that deserves to be implemented. I'm having same complaint with of of my projects that is primarily for web, not app, that looks real good in the browser, but the only way to scroll is with the mouse wheel. I expected to be able to drag scroll with mouse or use the keyboard arrow keys, and can't find any way to hack it to be functional enough.
The changes should be added to CustomScrollView and SingleChildScrollView to work on web. I was looking for a way to take the keyboard input to manually move the ScrollController, but not simple like I thought. Was even considering making a custom scroll bar widget to wrap the ScrollView with to give it a customizable scroll bar in a stack on web platform, but would be nicer if we can use the browser's native scroller. I know web support is still iffy, but this feels like a big missing piece at this point..

Yes, if Flutter is serious about building web apps, native scrollbar support is a must-have feature.

This is probably one of the most debilitating issues in terms of using Flutter for web because I have started building a web page with a lot of content on it. I can't really deploy it if no one can scroll on the website unless they are accessing the website from a mobile device. I really don't want to have to rebuild everything in another framework. I know Flutter Web isn't meant for production yet but this is definitely a big issue holding it back from getting there. Please give this one a deeper look soon. Thanks.

Applying overflow-y: auto as a css property makes elements scrollable in HTML for a reference point

I'm also stuck on this. I can scroll with mouse wheal but touch scrolling is still enabled. My workaround is to disable ScrollingPhysics and then manually catch the mouse scroll and scroll the SingleChildScrollView manually. I might work on implementing a custom scroll bar but native scrolling would just be ideal (or non-native scrolling that would be undistinguishable from native scrolling for all major browsers).

Hello, i have the same problem, page doesnt scroll with the mouse wheel or the touchpad

Just need some way to let that content be unbounded vertically, and let the native scrollbars do their thing. Easy right? ;)

+1. For flutter web it's quite essential

@Piinks

@Piinks was a scrollbar added? That's the biggest issue I have been looking forward to a solution for. My webpages need a scrollbar. Otherwise, they are unusable in production.

@Piinks

@Piinks was a scrollbar added? That's the biggest issue I have been looking forward to a solution for. My webpages need a scrollbar. Otherwise, they are unusable in production.

Please follow #70866 for scrollbars.

@Piinks

@Piinks was a scrollbar added? That's the biggest issue I have been looking forward to a solution for. My webpages need a scrollbar. Otherwise, they are unusable in production.

Mouse wheel scroll is available in latest flutter beta channel. For scrollbar use scrollbar widget and set isAlwaysShown property as true.

How do i prevent spacebar from scrolling if a textfield is in focus?

@devanflores

How do i prevent spacebar from scrolling if a textfield is in focus?

Hey @devanflores that is separate issue that is currently being worked on. You can track progress here:
#47156 and #70507

How do i prevent spacebar from scrolling if a textfield is in focus?

As a workaround for Flutter web you can just remove the default shortcut for [space] in the following way:

    import 'package:flutter/foundation.dart';
    ....
    return MaterialApp(
      shortcuts: {
        ...WidgetsApp.defaultShortcuts,
        if (kIsWeb) LogicalKeySet(LogicalKeyboardKey.space): null,
      },

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[web] Add support for spacebar Shortcut to include ScrollIntent #43694

57 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[web] Add support for spacebar Shortcut to include ScrollIntent #43694

Description

Activity

khari998 commented on Nov 2, 2019

khari998 commented on Nov 3, 2019

Skquark commented on Dec 6, 2019

esDotDev commented on Dec 13, 2019

khari998 commented on Dec 30, 2019

khari998 commented on Jan 6, 2020

Zizico2 commented on Jan 7, 2020

JasterV commented on Jan 8, 2020

esDotDev commented on Jan 8, 2020

woutervanwijk commented on Mar 20, 2020

57 remaining items

khari998 commented on Dec 17, 2020

Piinks commented on Dec 17, 2020

sanalkv commented on Dec 20, 2020

devanflores commented on Jan 18, 2021

Piinks commented on Jan 19, 2021

GyuriMajercsik commented on Jan 21, 2021

github-actions commented on Aug 6, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions