How to add a checker pattern background to a widget?

I want to create a checkered background for my ‘alpha’ slider.
the slider alpha gradient works but with no background.
I want the background to look like this:

cyclop_rvb

please note the way the checker has rounded corners.
I have a small tillable PNG that would be good to fill with.

Thanks :slight_smile:

Hello. I have created two widgets that can be combined to get your desired effect:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CheckerPattern extends StatelessWidget {
  final double checkerSize;
  final Color color1;
  final Color color2;

  const CheckerPattern({
    Key? key,
    this.checkerSize = 12,
    this.color1 = const Color.fromRGBO(192, 192, 192, 1.0),
    this.color2 = const Color.fromRGBO(255, 255, 255, 1.0),
  }) : super(key: key);
  
  _buildChecker({required Color color, required double width, required double height}) {
    return SizedBox(
      width: width,
      height: height,
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: color,
        ),
      ),
    );
  }
  
  Widget _buildColumn({required bool isRowEven, required double height, required double maxWidth}) {
    final heightInCheckers = (height / checkerSize).ceil();
    final lastCheckerHeight = height - (heightInCheckers - 1) * checkerSize;
    
    return SizedBox(
      width: min(maxWidth, checkerSize),
      child: Column(
        children: List<Widget>.generate(
          heightInCheckers.floor(),
          (i) {
            var isColumnEven = (i % 2 == 0);
            return _buildChecker(
              color: isRowEven ^ isColumnEven ? color1 : color2,
              width: min(maxWidth, checkerSize),
              height: i == heightInCheckers - 1 ? lastCheckerHeight : checkerSize,
            );
          },
        )
      )
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final widthInCheckers = (constraints.maxWidth / checkerSize).ceil();
        final lastColumnWidth = constraints.maxWidth - (widthInCheckers - 1) * checkerSize;
        
        return Row(
          children: List<Widget>.generate(widthInCheckers, (int i) {
            return _buildColumn(
              isRowEven: i.isEven,
              height: constraints.maxHeight,
              maxWidth: i == widthInCheckers - 1 ? lastColumnWidth : checkerSize,
            );
          })
        );
      },
    );
  }
}

class RoundedCorners extends StatelessWidget {
  final double radius;
  final Widget child;

  const RoundedCorners({
    Key? key,
    this.radius = 16,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(radius)),
      child: child,
    );
  }
}

You can use them like this:

child: const RoundedCorners(
  child: CheckerPattern(
    checkerSize: 12,
    color1: Color.fromRGBO(192, 192, 192, 1.0),
    color2: Color.fromRGBO(255, 255, 255, 1.0),
  )
),

This may not be the most performant way to achieve this effect due to the large number of widgets it creates (perhaps a CustomPainter might be better?), but as long as the widget is small enough it should suffice.

Either way, this is what it looks like in action: