使用 BackdropFilter 会影响行小部件中的其他小部件 - Flutter Web

Question

I am having an issue when trying to blur a container in a Row widget when the user hovers over it (on Chrome). I have a custom widget called PanelLink, which is supposed to shrink in size and blur the background when the cursor goes over it. It works, but for some reason when hovering over one it also blurs every widget to the left not just itself.

FrontPage.dart:

import 'package:flutter/material.dart';
import 'package:website_v2/CustomWidgets/PanelLink.dart';

class FrontPage extends StatefulWidget {
  FrontPage();

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

class _FrontPageState extends State<FrontPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Website'),
        centerTitle: false,
        backgroundColor: Colors.blue[900],
      ),
      backgroundColor: Colors.blueGrey[900],
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            PanelLink(false, 'assets/education.jpg'),
            PanelLink(true, 'assets/about.jpeg'),
            PanelLink(false, 'assets/projects2.jpg'),
          ],
        ),
      ),
    );
  }
}

PanelLink.dart:

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

class PanelLink extends StatefulWidget {
  PanelLink(this._blur, this.imageLoc);
  final bool _blur;
  final String imageLoc;
  @override
  PanelLinkState createState() => PanelLinkState(_blur, imageLoc);
}

class PanelLinkState extends State<PanelLink> {
  PanelLinkState(this._blur, this.imageLoc);

  bool isHovering = false;
  bool _blur;
  String imageLoc;

  Widget build(BuildContext context) {
    return Expanded(
        child: InkWell(
      onTap: () => null,
      onHover: (hovering) {
        setState(() => {isHovering = hovering});
      },
      child: Stack(children: [
        AnimatedContainer(
          duration: const Duration(milliseconds: 1000),
          curve: Curves.ease,
          margin: EdgeInsets.all(isHovering ? 20 : 0),
          decoration: BoxDecoration(
              color: Colors.black,
              image: DecorationImage(
                  image: AssetImage(imageLoc), fit: BoxFit.cover)),
          child: BackdropFilter(
              filter: ImageFilter.blur(
                  sigmaX: isHovering ? 5 : 0, sigmaY: isHovering ? 5 : 0),
              child: Container(
                color: Colors.black.withOpacity(0.1),
              )),
        ),
        Text('Test')
      ]),
    ));
  }
}

Here is a picture of the issue occurring. I am hovering the mouse over panel 2, but both panel 1 and 2 are blurred but not panel 3. If I hover over panel 1 only panel 1 is blurred. If I hover over panel 3, all of them are blurred.

I experimented by only making panel two have the BackdropFilter Widget, but panel 1 still got blurred when hovering over panel 2.

Answer 1

Since your using AnimatedContainer widget the problem might be it cant identify the difference between his child widget. Try adding a key value identifier

AnimatedContainer(
  child: Container(
    key: ValueKey("imageA"), //make sure that this is different on every widget, its better to passed some value here thats different on the other refactored widget
    Try experimenting it might work for you

  ),
),