我正在努力实现这个目标：

现在，我已经创建了一个天气小部件，并添加了一个页面视图生成器。我想淡化即将到来的和以前的小部件在页面视图和当前的小部件更清楚。为了测试的目的，我添加模糊的小部件，没有在焦点。

问题：：

我不知道如何模糊下一个小部件。当我切换当前和上一个小部件时，它们都模糊了。
下面是我目前的代码：

页面视图库.dart

class PageviewGallery extends StatefulWidget {
  @override
  _PageviewGalleryState createState() => _PageviewGalleryState();
}

class _PageviewGalleryState extends State<PageviewGallery> {
  var listWidgets = [
    WeatherCard(
        isActive: false,
        location: "Los Angeles, CA, USA",
        temperature: 15,
        localTimeEpoch: 1675101764,
        weatherState1: "Strong Winds",
        weatherState2: "Cloudy"),
    WeatherCard(
        isActive: true,
        location: "San Andreas, CA, USA",
        temperature: 15,
        localTimeEpoch: 1675101764,
        weatherState1: "Strong Winds",
        weatherState2: "Cloudy"),
    WeatherCard(
        isActive: true,
        location: "Los Angeles, CA, USA",
        temperature: 15,
        localTimeEpoch: 1675101764,
        weatherState1: "Strong Winds",
        weatherState2: "Cloudy"),
    WeatherCard(
        isActive: false,
        location: "Los Angeles, CA, USA",
        temperature: 15,
        localTimeEpoch: 1675101764,
        weatherState1: "Strong Winds",
        weatherState2: "Cloudy"),
    WeatherCard(
        isActive: false,
        location: "Los Angeles, CA, USA",
        temperature: 15,
        localTimeEpoch: 1675101764,
        weatherState1: "Strong Winds",
        weatherState2: "Cloudy"),
  ];
  final PageController ctrl = PageController(
    viewportFraction: 0.5,
  );

  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: ExpandablePageView.builder(
          controller: ctrl,
          itemCount: listWidgets.length,
          physics: const BouncingScrollPhysics(),
          itemBuilder: (context, int index) {
            // Active page
            bool active = index == currentPage;
            return _buildStoryPage(active, index);
          }),
    ));
  }

  @override
  void initState() {
    super.initState();
    ctrl.addListener(() {
      int pos = ctrl.page!.round();
      if (currentPage != pos) {
        {
          setState(() {
            currentPage = pos;
          });
        }
      }
    });
  }

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

  _buildStoryPage(bool active, int index) {
    // Animated Properties
    final double blur = active ? 30 : 0;
    final double offset = active ? 20 : 0;
    final double top = active ? 100 : 200;
    final double bottom = active ? 100 : 200;

    WeatherCard cWidget = listWidgets[index];
    // print("$index, $currentPage");
    return BackdropFilter(
      filter: ImageFilter.blur(
          sigmaX: active ? 2.0 : 0.0, sigmaY: active ? 2.0 : 0.0),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeOutQuint,
        margin: EdgeInsets.only(top: top, bottom: 100, right: 30),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.red,
            boxShadow: [
              BoxShadow(
                  color: Colors.black87,
                  blurRadius: blur,
                  offset: Offset(offset, offset))
            ]),
        child: cWidget,
      ),
    );
  }
}

天气_卡片.省道

import 'dart:ui';

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

class WeatherCard extends StatelessWidget {
  final String location;
  final int temperature;
  final int localTimeEpoch;
  final String weatherState1;
  final String weatherState2;
  bool isActive;
  WeatherCard(
      {super.key,
      required this.location,
      required this.temperature,
      required this.localTimeEpoch,
      required this.weatherState1,
      required this.weatherState2,
      required this.isActive});
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 450,
          width: 250,
          decoration: const BoxDecoration(color: Colors.transparent),
        ),
        Positioned(
          top: 100,
          left: 10,
          right: 10,
          bottom: 100,
          child: Container(
            height: 250,
            width: 250,
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                color: const Color.fromARGB(255, 44, 44, 44).withOpacity(0.5),
                spreadRadius: 2,
                blurStyle: BlurStyle.normal,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ], color: Colors.white, borderRadius: BorderRadius.circular(50)),
            child: Padding(
              padding: const EdgeInsets.only(top: 100.0, left: 20, right: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    location,
                    style: GoogleFonts.alegreyaSans(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        color: Colors.black),
                  ),
                  Row(
                    children: [
                      Text(
                        "$temperature",
                        style: GoogleFonts.alegreyaSans(
                            fontWeight: FontWeight.bold,
                            fontSize: 64,
                            color: Colors.black),
                      ),
                      Text(
                        "°C",
                        style: GoogleFonts.alegreyaSans(
                            fontWeight: FontWeight.w500,
                            fontSize: 14,
                            color: Colors.black),
                      ),
                    ],
                  ),
                  Text(
                    "Sunday, 11 am",
                    style: GoogleFonts.alegreyaSans(
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: Colors.black.withOpacity(0.5)),
                  ),
                ],
              ),
            ),
          ),
        ),
        Positioned(
            top: -100,
            left: 0,
            right: 0,
            bottom: 0,
            child: Image.asset("assets/images/shaddow.png")),
        Positioned(
            top: -300,
            left: 0,
            right: 0,
            bottom: 0,
            child: Image.asset("assets/images/moon_cloud.png")),
        Positioned(
            top: 330,
            left: 50,
            right: 50,
            bottom: 60,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: const Color(0xff5E4FC1),
              ),
              width: 20,
              // color: Colors.blue,
              child: Center(
                  child: Text(
                "VIEW STATS",
                style: GoogleFonts.alegreyaSans(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 14),
              )),
            )),
      ],
    );
  }
}

当前输出