Backdrop Filter

 Backdrop Filter|Blur image:

Video:

Code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
//  static const routeName = '/BackdropFilterWidget';  @override  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  var _blurValue = 0.0;

  @override  void initState() {
    //Hide banner ad if it isn't already hidden    super.initState();
  }

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Backdrop Filter"),
        backgroundColor: Colors.deepOrange,
      ),
      backgroundColor: Colors.teal,
      body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(34),
                height: 300,
                width: 300,
                child: Image.asset("images/logo.jpg"),
                // FlutterLogo(                //   colors: Colors.lightBlue,                //   textColor: Colors.white,                // ),              ),

              /// This is to make sure the filter covers the widget beneath it              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: _blurValue,
                    sigmaY: _blurValue,
                  ),

                  /// Child is not affected by the filter, only the widgets                  /// beneath it will be affected by the filter.                  /// So we use an empty container to demonstrate the changes                  /// on the FlutterLogo widget                  child: Container(
                    color: Colors.black.withOpacity(0.0),
                  ),
                ),
              ),
            ],
          ),
          Slider(
            value: _blurValue,
            activeColor: Colors.pinkAccent,
            inactiveColor: Colors.white,
            min: 0.0,
            max: 10.0,
            divisions: 10,
            label: '${_blurValue.truncate()}',
            onChanged: (double value) {
              setState(() {
                _blurValue = value;

              });
            },
          ),
          Container(
            margin: EdgeInsets.all(12),

            child: Text(
              'Blur Image',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
            ),

          ),
        ],
      ),
    );
  }
}