I just build and deployed a flutter web app. The problem I encountered is that it doesn't scroll when I press arrow keys, also there is no scroll bar. (Only 2 figure gesture scrolling is possible)
I'm using SingleChildScrollView() with the column as its child.
Is there a way to implement them?
Or just one of them?
The code from Karan works, but when the app is in Debug Mode, instead of using the event.logicalKey.debugName == "Arrow Up", we could use event.logicalKey == LogicalKeyboardKey.arrowUp which works in both the debug and release mode.
class _MyKeyboardScrollingPageState extends State<MyKeyboardScrollingPage> { final ScrollController _controller = ScrollController(); final FocusNode _focusNode = FocusNode(); void _handleKeyEvent(RawKeyEvent event) { var offset = _controller.offset; if (event.logicalKey == LogicalKeyboardKey.arrowUp) { setState(() { if (kReleaseMode) { _controller.animateTo(offset - 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } else { _controller.animateTo(offset - 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } }); } else if (event.logicalKey == LogicalKeyboardKey.arrowDown) { setState(() { if (kReleaseMode) { _controller.animateTo(offset + 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } else { _controller.animateTo(offset + 200, duration: Duration(milliseconds: 30), curve: Curves.ease); } }); } } @override void dispose() { _focusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: RawKeyboardListener( autoFocus = true, focusNode = _focusNode, onKey: _handleKeyEvent, child: SingleChildScrollView( controller: _controller, child: SomeAwesomeWidget(), ), ), ); } } 
The Most simplest way to Scroll using mouse or Keyboard Arrow keys on Flutter Web is
ListView( primary: true, scrollDirection: Axis.vertical, children: No need to pass any ScrollController
I found one solution ...
Hope this helps someone with the same issue...
Using RawKeyboardListener(), we can listen to any keyboard stroke.
class _MyHomePageState extends State<MyHomePage> { final ScrollController _controller = ScrollController(); final FocusNode _focusNode = FocusNode() @override void dispose() { _focusNode.dispose(); super.dispose(); } void _handleKeyEvent(RawKeyEvent event) { var offset = _controller.offset; //Getting current position if (event.logicalKey.debugName == "Arrow Down") { setState(() { if (kReleaseMode) { //This block only runs when the application was compiled in release mode. _controller.animateTo(offset + 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } else { // This will only print useful information in debug mode. // print(_controller.position); to get information.. _controller.animateTo(offset + 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } }); } else if (event.logicalKey.debugName == "Arrow Up"){ setState(() { if (kReleaseMode) { _controller.animateTo(offset - 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } else { _controller.animateTo(offset - 50, duration: Duration(milliseconds: 200), curve: Curves.ease); } }); @override Widget build(BuildContext context) { return Scaffold( body: RawKeyboardListener( autofocus: true, focusNode: _focusNode, onKey: _handleKeyEvent, child: SingleChildScrollView( controller: _controller, child:... } } You can wrap ScrollBar to SingleChildScrollView to show scroll bar, like this:
Scrollbar( child: SingleChildScrollView( child: Container(), )); 
For the answers that are mentioned above to work, you need the following imports:
import 'package:flutter/services.dart'; import 'package:flutter/foundation.dart'; 
