Animated matrix-style BackdropFilter

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Backdrop Matrix Demo',
      home: MyHomePage(title: 'Flutter Backdrop Matrix Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _twirlBackground = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 3),
      vsync: this,
    );
  }

  void switchBackground() {
    setState(() {
      _twirlBackground = !_twirlBackground;
    });
    if (_twirlBackground) {
      _controller.reset();
      _controller.forward().orCancel;
    } else {
      _controller.stop(canceled: false);
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget twirl() {
    Widget popup = Center(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue.withAlpha(0x40),
      ),
    );
    if (_twirlBackground) {
      return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          Matrix4 m = Matrix4.identity();
          m.translate(200.0, 300.0);
          m.rotateZ(_controller.value * 6.2832);
          m.scale(1.0 - _controller.value, 1.0 - _controller.value);
          m.translate(-200.0, -300.0);
          return BackdropFilter(
            filter: ImageFilter.matrix(m.storage),
            child: child,
          );
        },
        child: popup,
      );
    }
    return popup;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Text(
            'background' * 1000,
          ),
          twirl(),
        ],
      ),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text(_twirlBackground
                ? 'Restore background'
                : 'Twirl background'),
            onPressed: switchBackground,
          ),
        ],
      ),
    );
  }
}