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