This is an illustration of a Themed GSPressable widget with default configuration.
import 'package:gluestack_ui/gluestack_ui.dart';
GSPressable(
hitSlop: 10,
style: GSStyle(
bg: Colors.blue,
onHover: GSStyle(color: Colors.lightBlue),
onFocus: GSStyle(borderColor: Colors.red, borderWidth: 10),
),
onPress: () {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text('Button Pressed!'),
duration: Duration(milliseconds: 300),
));
},
onLongPress: () {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text('Long Pressed Triggered!'),
duration: Duration(milliseconds: 300),
));
},
child: GSText(
text: 'Press Me',
underline: true,
style: GSStyle(
color: Colors.blue,
textStyle: const TextStyle(letterSpacing: $GSLetterSpacing.$lg),
),
),
),
API Reference
Import
To use this component in your project, include the following import statement in your file.
import "package:gluestack_ui/gluestack_ui.dart"
This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.
GSPressable
It inherits all the properties of Flutter's
InkWell widget.
Examples
The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Pressable child elements according to its states
You can change the child elements according to the states of GSPressable widget.
import 'package:gluestack_ui/gluestack_ui.dart';
GSPressable(
style: GSStyle(
bg: $GSColors.blue600,
onHover: GSStyle(
color: $GSColors.blue900,
),
),
hitSlop: 10,
onPress: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.blue,
content: Text('Button Pressed!'),
duration: Duration(milliseconds: 300),
),
);
},
onLongPress: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.green,
content: Text('Long Pressed Triggered!'),
duration: Duration(milliseconds: 300),
),
);
},
child: const GSHeading(
text: 'PRESSABLE',
),
)
Similarly, you can change the child elements according to other states of GSPressable
widget and i.e. onHover , onPressIn , onPressOut, onLongPress, onDoubleTap, onSecondaryTap, onSecondaryTapUp, onSecondaryTapDown, onSecondaryTapCancel.