Flutter: How can I prevent default behaviour on key press?
I've faced a similar problem and what to share how I solved it.
To stop the propagation we have to return true
from onKey
method of a FocusNode
in the focus nodes tree. To achieve this I've wrapped my app body with FocusScope
and Focus
widgets like this:
MaterialApp( home: Scaffold( body: FocusScope( autofocus: true, child: Focus( autofocus: true, canRequestFocus: true, onKey: (data, event) { if (event.isKeyPressed(LogicalKeyboardKey.audioVolumeUp)) { print("Volume up"); return true; } if (event .isKeyPressed(LogicalKeyboardKey.audioVolumeDown)) { print("Volume down"); return true; } return false; }, child: Text(text: "Hallochen")))))
Thanks to Sergey's answer I was able to solve the issue as well. In my case, I wanted to create a ListView, with pull to refresh (RefreshIndicator
) that will work for both mobile devices and web.
I tried to implement a refresh indicator which will appear when the user clicks F5 to refresh the web page, but I had to prevent the browser from actually refreshing the page.
Here's an example of my implementation, which prevents refresh from occuring when the user clicks F5.
import 'package:flutter/material.dart';import 'package:flutter/services.dart';class ExamplePage extends StatefulWidget { @override _ExamplePageState createState() => _ExamplePageState();}class _ExamplePageState extends State<ExamplePage> { final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>(); final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>(); List items = []; Future<void> _pullRefresh() async { await Future.delayed(Duration(milliseconds: 1000)); } @override Widget build(BuildContext context) { return FocusScope( autofocus: true, child: Focus( autofocus: true, canRequestFocus: true, onKey: (data, event) { if (event .isKeyPressed(LogicalKeyboardKey.f5)) { _refreshIndicatorKey.currentState!.show(); return KeyEventResult.handled; } return KeyEventResult.ignored; }, child: Container( padding: EdgeInsets.all(15.0), child: RefreshIndicator( key: _refreshIndicatorKey, onRefresh: _pullRefresh, child: AnimatedList( key: listKey, initialItemCount: items.length, itemBuilder: (context, index, animation) { return _buildItem(context, index, animation); }, ), ), ), ), ); } Widget _buildItem( BuildContext context, int index, Animation<double> animation) { return Text("Example"); }}