BackdropFilter会影响其他小部件

Question

我想模糊我制作的按钮。这是我的代码：

main.dart：

import 'package:flutter/material.dart';

import 'components/blank_button.dart';
import 'components/blue_button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('The app title'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          BlankButton(
            width: 300,
            height: 55,
            onTap: () {
              print("Sign up button clicked!");
            },
            child: Center(
              child: Text(
                'Sign up',
                style: TextStyle(
                  color: Color(0xFF454242),
                  fontSize: 18,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
          ),
          BlueButton(
            width: 300,
            height: 55,
            onTap: () {
              print("Login button clicked!");
            },
            child: Center(
              child: Text(
                'Login',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w100,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

blank_button.dart：

import 'package:flutter/material.dart';

class BlankButton extends StatelessWidget {
  final Widget child;
  final double width, height;
  final GestureTapCallback onTap;

  const BlankButton({
    Key key,
    this.child,
    this.width,
    this.height,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        width: width,
        height: height,
        child: child,
      ),
    );
  }
}

blue_button.dart：

import 'dart:ui';

import 'package:flutter/material.dart';

class BlueButton extends StatelessWidget {
  final Widget child;
  final double width, height;
  final GestureTapCallback onTap;

  const BlueButton({
    Key key,
    this.child,
    this.width,
    this.height,
    this.onTap,
  }) : super(key: key);

  BoxDecoration _decoration() {
    return BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          Color(0xFF667EEA),
          Color(0xFF64B6FF),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(top: 20),
          child: Container(
            width: width * 0.66,
            height: height * 0.66,
            decoration: _decoration(),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20),
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 10,
              sigmaY: 10,
            ),
            child: Container(
              width: width * 0.66,
              height: height * 0.66,
              color: Colors.black.withOpacity(0),
            ),
          ),
        ),
        InkWell(
          onTap: onTap,
          child: Container(
            width: width,
            height: height,
            child: child,
            decoration: _decoration(),
          ),
        ),
      ],
    );
  }
}

问题在于BlueButton的模糊会影响BlankBut​​ton。我不知道为什么会这样。我看到某个地方应该用BackdropFilter包裹ClipRect，但它只是模糊了。

如何解决此问题？