Demonstration of tile modes used in blurring backdrop filters (doesn't work with Skia currently, only Impeller)

main.dart

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int offset = 5;
  int spacing = 3;
  int thickness = 1;
  TileMode mode = TileMode.clamp;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: Stack(
          children: [
            for (int i = -100; i < 1000; i++)
              Positioned(
                top: (i * spacing + offset).toDouble(),
                  child: Container(
                    height: thickness.toDouble(),
                    width: 1000000,
                    color: (i & 1) == 0 ? Colors.green : Colors.blue,
                  ),
              ),
            for (int i = 0; i < 1000; i++)
              Positioned(
                left: (i * 5).toDouble(),
                top: -1000,
                child: Container(
                  width: thickness.toDouble(),
                  height: 1000000,
                  color: (i & 1) == 0 ? Colors.green : Colors.blue,
                ),
              ),
            Positioned(
              bottom: 10,
              left: 10,
              right: 10,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  for (var tm in TileMode.values)
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          mode = tm;
                        });
                      },
                      child: Text(
                        '$tm'.replaceFirst('TileMode.', ''),
                        style: TextStyle(
                          decoration: (mode == tm) ? TextDecoration.underline : null,
                          decorationColor: Colors.blue,
                        ),
                      ),
                    ),
                  Column(
                    children: [
                      ElevatedButton(
                        onPressed: (){
                          setState(() {
                            offset -= 1;
                          });
                        },
                        child: const Text("Move up")
                      ),
                      const SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: (){
                          setState(() {
                            offset += 1;
                          });
                        },
                        child: const Text("Move down")
                      ),
                    ],
                  ),
                  Column(
                    children: [
                      ElevatedButton(
                        onPressed: (){
                          setState(() {
                            thickness = max(1, thickness - 1);
                          });
                        },
                        child: const Text("Thinner")
                      ),
                      const SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: (){
                          setState(() {
                            thickness += 1;
                          });
                        },
                        child: const Text("Thicker")
                      ),
                    ],
                  ),
                  Column(
                    children: [
                      ElevatedButton(
                          onPressed: (){
                            setState(() {
                              spacing = max(1, spacing - 1);
                            });
                          },
                          child: const Text("Closer")
                      ),
                      const SizedBox(height: 10),
                      ElevatedButton(
                          onPressed: (){
                            setState(() {
                              spacing += 1;
                            });
                          },
                          child: const Text("Further")
                      ),
                    ],
                  ),
                ],
              )
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              bottom: 100,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                      child: ClipRect(
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16, tileMode: mode),
                          child: Container(),
                        ),
                      )
                  ),
                  Expanded(child: Container()),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}