example: add gradients

Signed-off-by: Egon Elbre <egonelbre@gmail.com>

example/kitchen/kitchen.go

@@ -25,6 +25,7 @@ import (
 	"gioui.org/io/system"
 	"gioui.org/layout"
 	"gioui.org/op"
+	"gioui.org/op/paint"
 	"gioui.org/text"
 	"gioui.org/unit"
 	"gioui.org/widget"
@@ -240,6 +241,14 @@ func (b iconAndTextButton) Layout(gtx layout.Context) layout.Dimensions {
 	})
 }
 
+func bounds(gtx layout.Context) f32.Rectangle {
+	cs := gtx.Constraints
+	d := cs.Min
+	return f32.Rectangle{
+		Max: f32.Point{X: float32(d.X), Y: float32(d.Y)},
+	}
+}
+
 func kitchen(gtx layout.Context, th *material.Theme) layout.Dimensions {
 	for _, e := range lineEditor.Events() {
 		if e, ok := e.(widget.SubmitEvent); ok {
@@ -261,6 +270,23 @@ func kitchen(gtx layout.Context, th *material.Theme) layout.Dimensions {
 				return layout.UniformInset(unit.Dp(8)).Layout(gtx, e.Layout)
 			})
 		},
+		func(gtx C) D {
+			gtx.Constraints.Min.Y = gtx.Px(unit.Dp(50))
+			gtx.Constraints.Max.Y = gtx.Constraints.Min.Y
+
+			dr := bounds(gtx)
+			paint.LinearGradientOp{
+				Stop1:  dr.Min,
+				Stop2:  dr.Max,
+				Color1: color.RGBA{0x10, 0xff, 0x10, 0xFF},
+				Color2: color.RGBA{0x10, 0x10, 0xff, 0xFF},
+			}.Add(gtx.Ops)
+
+			paint.PaintOp{Rect: dr}.Add(gtx.Ops)
+			return layout.Dimensions{
+				Size: gtx.Constraints.Max,
+			}
+		},
 		func(gtx C) D {
 			in := layout.UniformInset(unit.Dp(8))
 			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,

example/tabs/tabs.go

@@ -122,7 +122,7 @@ func drawTabs(gtx layout.Context, th *material.Theme) layout.Dimensions {
 		}),
 		layout.Flexed(1, func(gtx C) D {
 			return slider.Layout(gtx, func(gtx C) D {
-				fill(gtx, dynamicColor(tabs.selected))
+				fill(gtx, dynamicColor(tabs.selected), dynamicColor(tabs.selected+1))
 				return layout.Center.Layout(gtx,
 					material.H1(th, fmt.Sprintf("Tab content #%d", tabs.selected+1)).Layout,
 				)
@@ -139,9 +139,22 @@ func bounds(gtx layout.Context) f32.Rectangle {
 	}
 }
 
-func fill(gtx layout.Context, col color.RGBA) {
+func fill(gtx layout.Context, col1, col2 color.RGBA) {
 	dr := bounds(gtx)
-	paint.ColorOp{Color: col}.Add(gtx.Ops)
+	paint.ColorOp{Color: color.RGBA{R: 0xff, G: 0xff, B: 0xff, A: 0xFF}}.Add(gtx.Ops)
+	paint.ColorOp{Color: color.RGBA{R: 0, G: 0, B: 0, A: 0xFF}}.Add(gtx.Ops)
+	paint.PaintOp{Rect: dr}.Add(gtx.Ops)
+
+	col2.R = byte(float32(col2.R))
+	col2.G = byte(float32(col2.G))
+	col2.B = byte(float32(col2.B))
+	col2.A = byte(float32(col2.A) * 0.2)
+	paint.LinearGradientOp{
+		Stop1:  f32.Pt(dr.Min.X, 0),
+		Stop2:  f32.Pt(dr.Max.X, 0),
+		Color1: col1,
+		Color2: col2,
+	}.Add(gtx.Ops)
 	paint.PaintOp{Rect: dr}.Add(gtx.Ops)
 }