Theme Widget#
Theme is a widget which applies default property values to its entire subtree. All other widgets fallback to their
respective properties from the nearest theme ancestor.
Properties#
| Property | Description |
|---|---|
alignHorizontalAlignment |
Default vertical alignment of Align widgets |
alignVerticalAlignment |
Default horizontal alignment of Align widgets |
buttonDefaultBackground |
Default background image of Button widgets |
buttonHoverBackground |
Default hover background of Button widgets |
buttonPressedBackground |
Default pressed background of Button widgets |
checkboxDefaultIcon |
Default icon of Checkbox widgets |
checkboxToggledIcon |
Default toggled icon of Checkbox widgets |
checkboxIconWidth |
Default icon width of Checkbox widgets |
checkboxIconHeight |
Default icon height of Checkbox widgets |
checkboxGapSize |
Default gap size of Checkbox widgets |
checkboxToggled |
Default toggled state of Checkbox widgets |
columnGapSize |
Default gap size of Column widgets |
columnMainAxisAlignment |
Default main axis alignment of Column widgets |
columnCrossAxisAlignment |
Default cross axis alignment of Column widgets |
fieldDefaultBackground |
Default background of Field widgets |
fieldFocusBackground |
Default focus background of Field widgets |
fieldPadding |
Default input box padding of Field widgets |
fieldText |
Default text of Field widgets |
fieldFont |
Default font object of Field widgets |
fieldFontSize |
Default font size of Field widgets |
fieldFontHeightRatio |
Default font height ratio of Field widgets |
fieldFontStyle |
Default font style of Field widgets |
fieldColor |
Default foreground color of Field widgets |
fieldBackgroundColor |
Default background color of Field widgets |
fieldAlignment |
Default alignment of Field widgets |
fieldShadowEnabled |
Default enabled status of text shadows of Field widgets |
fieldShadowOffsetX |
Default horizontal shadow offset of Field widgets |
fieldShadowOffsetY |
Default vertical shadow offset of Field widgets |
fieldShadowColor |
Default shadow color of Field widgets |
gapWidth |
Default width of Gap widgets |
gapHeight |
Default width of Gap widgets |
imageFit |
Default fit of Image widgets |
imageInterpolation |
Default interpolation of Image widgets |
opacityOpacity |
Default opacity of Opacity widgets |
paddingPadding |
Default padding of Padding widgets |
panelBackground |
Default background image of Panel widgets |
panelColor |
Default background color of Panel widgets |
panelCornerRadius |
Default corner radius of Panel widgets |
panelClip |
Default clip flag of Panel widgets |
progressTrackBackground |
Default track background of Progress widgets |
progressFillBackground |
Default progress indicator background of Progress widgets |
progressFillMargin |
Default fill margin of Progress widgets |
progressFillMode |
Default fill mode of Progress widgets |
progressMinValue |
Default minimum value of Progress widgets |
progressMaxValue |
Default maximum value of Progress widgets |
progressValue |
Default value of Progress widgets |
rowGapSize |
Default gap size of Row widgets |
rowMainAxisAlignment |
Default main axis alignment of Row widgets |
rowCrossAxisAlignment |
Default cross axis alignment of Row widgets |
scaledScale |
Default scale of Scaled widgets |
sizedUseIntrinsicWidth |
Default useIntrinsicWidth flag of Sized widgets |
sizedUseIntrinsicHeight |
Default useIntrinsicHeight flag of Sized widgets |
sizedFractionalWidth |
Default fractional width of Sized widgets |
sizedFractionalHeight |
Default fractional height of Sized widgets |
sizedFixedWidth |
Default fixed width of Sized widgets |
sizedFixedHeight |
Default fixed height of Sized widgets |
sliderThumbBackground |
Default thumb background of Slider widgets |
sliderThumbWidth |
Default thumb width of Slider widgets |
sliderThumbHeight |
Default thumb height of Slider widgets |
sliderTrackBackground |
Default track background of Slider widgets |
sliderFillBackground |
Default progress indicator background of Slider widgets |
sliderFillMargin |
Default fill margin of Slider widgets |
sliderFillMode |
Default fill mode of Slider widgets |
sliderMinValue |
Default minimum value of Slider widgets |
sliderMaxValue |
Default maximum value of Slider widgets |
sliderValue |
Default value of Slider widgets |
textText |
Default text of Text widgets |
textFont |
Default font object of Text widgets |
textFontSize |
Default font size of Text widgets |
textFontHeightRatio |
Default font height ratio of Text widgets |
textFontStyle |
Default font style of Text widgets |
textColor |
Default foreground color of Text widgets |
textBackgroundColor |
Default background color of Text widgets |
textAlignment |
Default alignment of Text widgets |
textShadowEnabled |
Default enabled status of text shadows of Text widgets |
textShadowOffsetX |
Default horizontal shadow offset of Text widgets |
textShadowOffsetY |
Default vertical shadow offset of Text widgets |
textShadowColor |
Default shadow color of Text widgets |
Usage#
Theme.create(
props -> {
props.alignHorizontalAlignment = Alignment.START;
props.alignVerticalAlignment = Alignment.CENTER;
props.buttonDefaultBackground = IO.getImage("default-bg.png");
props.buttonHoverBackground = IO.getImage("hover-bg.png");
props.buttonPressedBackground = IO.getImage("pressed-bg.png");
props.checkboxDefaultIcon = IO.getImage("default-bg.png");
props.checkboxToggledIcon = IO.getImage("hover-bg.png");
props.checkboxIconWidth = 64;
props.checkboxIconHeight = 64;
props.checkboxGapSize = 24;
props.checkboxToggled = true;
props.coloredColor = Color.RED;
props.coloredBorderRadius = 24;
props.columnGapSize = 20;
props.columnMainAxisAlignment = MainAxisAlignment.START;
props.columnCrossAxisAlignment = CrossAxisAlignment.STRETCH;
props.fieldDefaultBackground = IO.getImage("default-bg.png");
props.fieldFocusBackground = IO.getImage("focus-bg.png");
props.fieldPadding = new Spacing(10, 20, 10, 24);
props.fieldText = "Hello GameKit";
props.fieldFont = IO.getResourceFont("custom-font.ttf");
props.fieldFontSize = 24;
props.fieldFontHeightRatio = 0.9;
props.fieldFontStyle = Text.ITALIC;
props.fieldColor = Color.RED;
props.fieldBackgroundColor = Color.WHITE;
props.fieldAlignment = Alignment.CENTER;
props.fieldShadowEnabled = true;
props.fieldShadowOffsetX = 2;
props.fieldShadowOffsetY = 3;
props.fieldShadowColor = Color.BLUE;
props.gapWidth = 12;
props.gapHeight = 12;
props.imageFit = ImageFit.FIT;
props.imageInterpolation = ImageInterpolation.BICUBIC;
props.opacityOpacity = 0.5;
props.paddingPadding = new Spacing(24);
props.panelBackground = IO.getImage("background.png");
props.cornerRadius = 32;
props.clip = true;
props.progressTrackBackground = IO.getResourceFont("default-progress-bg.ttf");
props.progressFillBackground = IO.getResourceFont("default-fill-bg.ttf");
props.progressFillMargin = new Spacing(4);
props.progressFillMode = FillMode.CLIP;
props.progressMinValue = 0.0;
props.progressMaxValue = 100.0;
props.progressValue = 50.0;
props.rowGapSize = 20;
props.rowMainAxisAlignment = MainAxisAlignment.START;
props.rowCrossAxisAlignment = CrossAxisAlignment.STRETCH;
props.scaledScale = 0.8;
props.sizedUseIntrinsicWidth = false;
props.sizedUseIntrinsicHeight = false;
props.sizedFractionalWidth = 0.5;
props.sizedFractionalHeight = 0.5;
props.sizedFixedWidth = 48.0;
props.sizedFixedHeight = 48.0;
props.sliderThumbBackground = IO.getResourceFont("default-progress-bg.ttf");
props.sliderThumbWidth = 24;
props.sliderThumbHeight = 24;
props.sliderTrackBackground = IO.getResourceFont("default-progress-bg.ttf");
props.sliderFillBackground = IO.getResourceFont("default-fill-bg.ttf");
props.sliderFillMargin = new Spacing(4);
props.sliderFillMode = FillMode.CLIP;
props.sliderMinValue = 0.0;
props.sliderMaxValue = 100.0;
props.sliderValue = 50.0;
props.textText = "Hello GameKit";
props.textFont = IO.getResourceFont("custom-font.ttf");
props.textFontSize = 24;
props.textFontHeightRatio = 0.9;
props.textFontStyle = Text.ITALIC;
props.textColor = Color.RED;
props.textBackgroundColor = Color.WHITE;
props.textAlignment = Alignment.CENTER;
props.textShadowEnabled = true;
props.textShadowOffsetX = 2;
props.textShadowOffsetY = 3;
props.textShadowColor = Color.BLUE;
},
Text.create("Themed child"),
);