import 'package:gluestack_ui/gluestack_ui.dart';
GSButton(
action: GSActions.primary,
variant: GSVariants.solid,
size: GSSize.$md,
isDisabled: false,
isFocusVisible: false,
onPressed: () {},
child: const GSHStack(
children: [
GSButtonText(text: "Add"),
GSButtonIcon(icon: Icons.add)
],
),
)
import "package:gluestack_ui/gluestack_ui.dart"
Parameters | Type | Default | Description |
---|---|---|---|
isFocusVisible | bool | false | To manually set focused state to the button. |
isDisabled | bool | false | To manually set disable to the button. |
Parameters | Description |
---|---|
style | Parameter to style GSButton Widget |
Name | Value | Default |
---|---|---|
action | primary | secondary | positive | negative | primary |
variant | link | outline | solid | solid |
size | xs | sm | md | lg | md |
import 'package:gluestack_ui/gluestack_ui.dart';
GSButton(
child: GSHStack(
children: [
GSSpinner(
strokeWidth: 2,
style: GSStyle(
color: $GSColors.white,
bg: $GSColors.blueGray300,
width: 20,
height: 20,
),
),
const SizedBox(
width: 7,
),
GSButtonText(
text: "Please wait",
),
],
),
onPressed: () {},
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSButton(
style: GSStyle(width: 55, height: 55, borderRadius: 30),
child: const GSButtonIcon(
icon: Icons.calendar_view_week_outlined,
),
onPressed: () {},
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSButton(
variant: GSButtonVariants.link,
style: GSStyle(
color: Colors.transparent,
onHover: GSStyle(bg: Colors.transparent),
),
child: const GSText(text: 'Back to top'),
onPressed: () {},
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSBox(
style: GSStyle(
borderColor: $GSColors.warmGray500,
width: 1000,
height: 200,
borderRadius: 8,
borderWidth: 1.2,
),
child: GSHStack(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GSBox(
style: GSStyle(width: 300),
child: const GSVStack(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GSHeading(
text: 'Was this page helpful?',
),
GSText(
text: 'We use this feedback to improve the quality of our documentation.',
),
],
),
),
GSHStack(
children: [
GSButton(
variant: GSVariants.outline,
action: GSActions.secondary,
child: GSButtonText(
text: "No",
style: GSStyle(),
),
onPressed: () {},
),
const SizedBox(
width: 20,
),
GSButton(
variant: GSVariants.solid,
action: GSActions.positive,
child: GSButtonText(
text: "Yes",
style: GSStyle(),
),
onPressed: () {},
),
],
),
],
),
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSBox(
style: GSStyle(
width: 300,
height: 100,
),
child: GSVStack(
children: [
GSButton(
child: GSHStack(
children: [
GSIcon(
icon: Icons.edit,
style: GSStyle(color: $GSColors.white),
),
const SizedBox(
width: 5,
),
GSButtonText(
text: "Left Icon",
style: GSStyle(),
),
],
),
onPressed: () {},
),
const SizedBox(
height: 20,
),
GSButton(
child: GSHStack(
children: [
GSButtonText(
text: "Right Icon",
style: GSStyle(),
),
const SizedBox(
width: 5,
),
GSIcon(
icon: Icons.add,
style: GSStyle(color: $GSColors.white),
),
],
),
onPressed: () {},
),
],
),
)
import 'package:gluestack_ui/gluestack_ui.dart';
GSBox(
style: GSStyle(
borderColor: $GSColors.warmGray500,
width: 320,
height: 350,
borderRadius: 8,
borderWidth: 1.2,
padding: const EdgeInsets.symmetric(horizontal: 20),
),
child: GSVStack(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const GSVStack(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GSHeading(
text: 'Set new password',
),
GSText(
text:
'Almost done. Enter your new password and you are all set.',
),
],
),
const GSInput(
size: GSSizes.$sm,
variant: GSVariants.outline,
cursorHeight: 12,
constraints: BoxConstraints(
maxWidth: 280,
maxHeight: 40,
),
labelText: "New password",
labelStyle: TextStyle(fontSize: 12),
errorStyle: TextStyle(
fontSize: 7,
),
),
const GSInput(
size: GSSizes.$sm,
variant: GSVariants.outline,
cursorHeight: 12,
constraints: BoxConstraints(
maxWidth: 280,
maxHeight: 40,
),
labelText: "Confirm new password",
labelStyle: TextStyle(fontSize: 12),
errorStyle: TextStyle(
fontSize: 7,
),
),
GSBox(
style: GSStyle(
width: double.maxFinite,
),
child: GSButton(
variant: GSVariants.solid,
action: GSActions.primary,
size: GSSizes.$lg,
child: const GSButtonText(
text: "Submit",
),
onPressed: () {},
),
),
],
),
)