Package material implements the Material design.

To maximize reusability and visual flexibility, user interface controls are split into two parts: the stateful widget and the stateless drawing of it.

For example, widget.Clickable encapsulates the state and event handling of all clickable areas, while the Theme is responsible to draw a specific area, for example a button.

This snippet defines a button that prints a message when clicked:

var gtx layout.Context
button := new(widget.Clickable)

for button.Clicked(gtx) {

Use a Theme to draw the button:

theme := material.NewTheme(...)

material.Button(theme, "Click me!").Layout(gtx, button)


Quite often, a program needs to customize the theme-provided defaults. Several options are available, depending on the nature of the change.

Mandatory parameters: Some parameters are not part of the widget state but have no obvious default. In the program above, the button text is a parameter to the Theme.Button method.

Theme-global parameters: For changing the look of all widgets drawn with a particular theme, adjust the `Theme` fields:

theme.Color.Primary = color.NRGBA{...}

Widget-local parameters: For changing the look of a particular widget, adjust the widget specific theme object:

btn := material.Button(theme, "Click me!")
btn.Font.Style = text.Italic
btn.Layout(gtx, button)

Widget variants: A widget can have several distinct representations even though the underlying state is the same. A widget.Clickable can be drawn as a round icon button:

icon := material.NewIcon(...)

material.IconButton(theme, icon).Layout(gtx, button)

Specialized widgets: Theme both define a generic Label method that takes a text size, and specialized methods for standard text sizes such as Theme.H1 and Theme.Body2.



This section is empty.


This section is empty.


func Clickable

func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) layout.Dimensions

Clickable lays out a rectangular clickable widget without further decoration.


type ButtonLayoutStyle

type ButtonLayoutStyle struct {
	Background   color.NRGBA
	CornerRadius unit.Value
	Button       *widget.Clickable

func ButtonLayout

func ButtonLayout(th *Theme, button *widget.Clickable) ButtonLayoutStyle

func (ButtonLayoutStyle) Layout

type ButtonStyle

type ButtonStyle struct {
	Text string
	// Color is the text color.
	Color        color.NRGBA
	Font         text.Font
	TextSize     unit.Value
	Background   color.NRGBA
	CornerRadius unit.Value
	Inset        layout.Inset
	Button       *widget.Clickable
	// contains filtered or unexported fields

func Button

func Button(th *Theme, button *widget.Clickable, txt string) ButtonStyle

func (ButtonStyle) Layout

func (b ButtonStyle) Layout(gtx layout.Context) layout.Dimensions

type CheckBoxStyle

type CheckBoxStyle struct {
	CheckBox *widget.Bool
	// contains filtered or unexported fields

func CheckBox

func CheckBox(th *Theme, checkBox *widget.Bool, label string) CheckBoxStyle

func (CheckBoxStyle) Layout

Layout updates the checkBox and displays it.

type EditorStyle

type EditorStyle struct {
	Font     text.Font
	TextSize unit.Value
	// Color is the text color.
	Color color.NRGBA
	// Hint contains the text displayed when the editor is empty.
	Hint string
	// HintColor is the color of hint text.
	HintColor color.NRGBA
	// SelectionColor is the color of the background for selected text.
	SelectionColor color.NRGBA
	Editor         *widget.Editor
	// contains filtered or unexported fields

func Editor

func Editor(th *Theme, editor *widget.Editor, hint string) EditorStyle

func (EditorStyle) Layout

func (e EditorStyle) Layout(gtx layout.Context) layout.Dimensions

type IconButtonStyle

type IconButtonStyle struct {
	Background color.NRGBA
	// Color is the icon color.
	Color color.NRGBA
	Icon  *widget.Icon
	// Size is the icon size.
	Size   unit.Value
	Inset  layout.Inset
	Button *widget.Clickable

func IconButton

func IconButton(th *Theme, button *widget.Clickable, icon *widget.Icon) IconButtonStyle

func (IconButtonStyle) Layout

type LabelStyle

type LabelStyle struct {
	// Face defines the text style.
	Font text.Font
	// Color is the text color.
	Color color.NRGBA
	// Alignment specify the text alignment.
	Alignment text.Alignment
	// MaxLines limits the number of lines. Zero means no limit.
	MaxLines int
	Text     string
	TextSize unit.Value
	// contains filtered or unexported fields

func Body1

func Body1(th *Theme, txt string) LabelStyle

func Body2

func Body2(th *Theme, txt string) LabelStyle

func Caption

func Caption(th *Theme, txt string) LabelStyle

func H1

func H1(th *Theme, txt string) LabelStyle

func H2

func H2(th *Theme, txt string) LabelStyle

func H3

func H3(th *Theme, txt string) LabelStyle

func H4

func H4(th *Theme, txt string) LabelStyle

func H5

func H5(th *Theme, txt string) LabelStyle

func H6

func H6(th *Theme, txt string) LabelStyle

func Label

func Label(th *Theme, size unit.Value, txt string) LabelStyle

func (LabelStyle) Layout

func (l LabelStyle) Layout(gtx layout.Context) layout.Dimensions

type LoaderStyle

type LoaderStyle struct {
	Color color.NRGBA

func Loader

func Loader(th *Theme) LoaderStyle

func (LoaderStyle) Layout

func (l LoaderStyle) Layout(gtx layout.Context) layout.Dimensions

type Palette

type Palette struct {
	// Bg is the background color atop which content is currently being
	// drawn.
	Bg color.NRGBA

	// Fg is a color suitable for drawing on top of Bg.
	Fg color.NRGBA

	// ContrastBg is a color used to draw attention to active,
	// important, interactive widgets such as buttons.
	ContrastBg color.NRGBA

	// ContrastFg is a color suitable for content drawn on top of
	// ContrastBg.
	ContrastFg color.NRGBA

Palette contains the minimal set of colors that a widget may need to draw itself.

type ProgressBarStyle

type ProgressBarStyle struct {
	Color      color.NRGBA
	TrackColor color.NRGBA
	Progress   float32

func ProgressBar

func ProgressBar(th *Theme, progress float32) ProgressBarStyle

func (ProgressBarStyle) Layout

type RadioButtonStyle

type RadioButtonStyle struct {
	Key   string
	Group *widget.Enum
	// contains filtered or unexported fields

func RadioButton

func RadioButton(th *Theme, group *widget.Enum, key, label string) RadioButtonStyle

RadioButton returns a RadioButton with a label. The key specifies the value for the Enum.

func (RadioButtonStyle) Layout

Layout updates enum and displays the radio button.

type SliderStyle

type SliderStyle struct {
	Min, Max float32
	Color    color.NRGBA
	Float    *widget.Float

	FingerSize unit.Value

func Slider

func Slider(th *Theme, float *widget.Float, min, max float32) SliderStyle

Slider is for selecting a value in a range.

func (SliderStyle) Layout

func (s SliderStyle) Layout(gtx layout.Context) layout.Dimensions

type SwitchStyle

type SwitchStyle struct {
	Color struct {
		Enabled  color.NRGBA
		Disabled color.NRGBA
		Track    color.NRGBA
	Switch *widget.Bool

func Switch

func Switch(th *Theme, swtch *widget.Bool) SwitchStyle

Switch is for selecting a boolean value.

func (SwitchStyle) Layout

func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions

Layout updates the switch and displays it.

type Theme

type Theme struct {
	Shaper text.Shaper
	TextSize unit.Value
	Icon     struct {
		CheckBoxChecked   *widget.Icon
		CheckBoxUnchecked *widget.Icon
		RadioChecked      *widget.Icon
		RadioUnchecked    *widget.Icon

	// FingerSize is the minimum touch target size.
	FingerSize unit.Value

func NewTheme

func NewTheme(fontCollection []text.FontFace) *Theme

func (Theme) WithPalette

func (t Theme) WithPalette(p Palette) Theme