Created
September 2, 2020 13:09
-
-
Save JoseAlba/5544c57e20454fe212e3ec5cf10b1f0a to your computer and use it in GitHub Desktop.
FocusableActionDetector Focus and Hover support
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Flutter code sample for FocusableActionDetector | |
// This example shows how keyboard interaction can be added to a custom control | |
// that changes color when hovered and focused, and can toggle a light when | |
// activated, either by touch or by hitting the `X` key on the keyboard when | |
// the "And Me" button has the keyboard focus (be sure to use TAB to move the | |
// focus to the "And Me" button before trying it out). | |
// | |
// This example defines its own key binding for the `X` key, but in this case, | |
// there is also a default key binding for [ActivateAction] in the default key | |
// bindings created by [WidgetsApp] (the parent for [MaterialApp], and | |
// [CupertinoApp]), so the `ENTER` key will also activate the buttons. | |
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
/// This Widget is the main application widget. | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: MyStatefulWidget(), | |
); | |
} | |
} | |
class FadButton extends StatefulWidget { | |
const FadButton({Key key, this.onPressed, this.child}) : super(key: key); | |
final VoidCallback onPressed; | |
final Widget child; | |
@override | |
_FadButtonState createState() => _FadButtonState(); | |
} | |
class _FadButtonState extends State<FadButton> { | |
bool _focused = false; | |
bool _hovering = false; | |
bool _on = false; | |
Color get color { | |
Color baseColor = Colors.lightBlue; | |
if (_focused) { | |
baseColor = Color.alphaBlend(Colors.black.withOpacity(0.25), baseColor); | |
} | |
if (_hovering) { | |
baseColor = Color.alphaBlend(Colors.black.withOpacity(0.1), baseColor); | |
} | |
return baseColor; | |
} | |
void _toggleState() { | |
setState(() { | |
_on = !_on; | |
}); | |
} | |
void _handleFocusHighlight(bool value) { | |
setState(() { | |
_focused = value; | |
}); | |
} | |
void _handleHoveHighlight(bool value) { | |
setState(() { | |
_hovering = value; | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return GestureDetector( | |
onTap: _toggleState, | |
child: FocusableActionDetector( | |
onShowFocusHighlight: _handleFocusHighlight, | |
onShowHoverHighlight: _handleHoveHighlight, | |
child: Row( | |
children: <Widget>[ | |
Container( | |
padding: EdgeInsets.all(10.0), | |
color: color, | |
child: widget.child, | |
), | |
Container( | |
width: 30, | |
height: 30, | |
margin: EdgeInsets.all(10.0), | |
color: _on ? Colors.red : Colors.transparent, | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
class MyStatefulWidget extends StatefulWidget { | |
MyStatefulWidget({Key key}) : super(key: key); | |
@override | |
_MyStatefulWidgetState createState() => _MyStatefulWidgetState(); | |
} | |
class _MyStatefulWidgetState extends State<MyStatefulWidget> { | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text('FocusableActionDetector Example'), | |
), | |
body: Center( | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: FadButton(onPressed: () {}, child: Text('Focusable')), | |
), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: FadButton(onPressed: () {}, child: Text('Action')), | |
), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: FadButton(onPressed: () {}, child: Text('Detector')), | |
), | |
], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment