flutter 如何应用背景滤镜模糊只在抽屉?

xesrikrc  于 2023-01-18  发布在  Flutter
关注(0)|答案(3)|浏览(139)

我试图应用模糊效果使用BackdropFilter只在抽屉上,并离开其他屏幕区域(Scafold,不太确定的名称)作为它的。

我想消除黄色区域的模糊效果,我已经花了很多时间,但仍然卡住了。
这是我的抽屉密码:

@override
 Widget build(BuildContext context) {
return Drawer(
  child: Stack(
    //  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop)
    children: <Widget>[
      Image.network(
        userPicUrl,
        height: MediaQuery.of(context).size.height,
        fit: BoxFit.cover,
      ),
      Container(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 16.0, sigmaY: 16.0),
          child: Container(
            decoration: BoxDecoration(
                color: Colors.lightBlueAccent.withOpacity(0.5)),
          ),
        ),
      ),
      Positioned(
        left: 150,
        top: 100,
        height: 100.0,
        width: 100.0,
        child: InkWell(
          onTap: () async {
            imageFile =
                await ImagePicker.pickImage(source: ImageSource.gallery);
            setState(() {});
          },
          splashColor: Colors.lightGreenAccent,
          highlightColor: Colors.pinkAccent.withOpacity(0.5),
          child: Icon(
            Icons.image,
            size: 24,
            color: Colors.transparent,
          ),
        ),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: SafeArea(
              child: ClipRRect(
                child: Container(
                  height: 120,
                  width: 120,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(64),
                    border: Border(
                        right: BorderSide(width: 2, color: Colors.white),
                        left: BorderSide(width: 2, color: Colors.white),
                        top: BorderSide(width: 2, color: Colors.white),
                        bottom: BorderSide(width: 2, color: Colors.white)),
                    image: DecorationImage(
                        image: NetworkImage(userPicUrl),
                        fit: BoxFit.fitHeight),
                  ),
                ),
              ),
            ),
          ),
          Text(
            "ژینەر حەیدەر تەها",
            textAlign: TextAlign.center,
            maxLines: 2,
            style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.w600),
          ),
          Text(
            "C6-1",
            style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.w900),
          ),
          Spacer(),
          Column(
            children: drawerItems.map((item) {
              return ListTile(
                leading: Icon(
                  item.icon,
                  size: 28,
                  color: Colors.white,
                ),
                title: Text(
                  item.title,
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              );
            }).toList(),
          ),
          Spacer(),
          ListTile(
            leading: Icon(
              Icons.exit_to_app,
              size: 28,
              color: Colors.white,
            ),
            title: Text(
              "Sign Out",
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  fontWeight: FontWeight.w400),
            ),
          )
        ],
      ),
    ],
  ),
);}

唯一的解决办法是为抽屉做一个自定义控制器吗?我只是不想这么做

6vl6ewon

6vl6ewon1#

所以,以防万一有人遇到这种情况,我解决了我的 Package 与ClipPath小部件的菜单堆栈,蓝色消失了,这是怎么可能的,我不知道,但它做的工作:)。

oxcyiej7

oxcyiej72#

你可以复制粘贴运行下面的完整代码
您可以使用SizedBox
在我的测试中,如果width〉= 250,仍然模糊整个屏幕。所以在我的演示width是249。
您可以在自己的情况下测试width
代码片段

SizedBox(
    width: 249,
    child: Drawer(

工作演示

全码

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

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem({this.title, this.icon});
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String userPicUrl = "https://picsum.photos/250?image=9";
  List<DrawerItem> drawerItems = [DrawerItem(title: "abc", icon: Icons.add),DrawerItem(title: "def", icon: Icons.title)];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.width);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: SizedBox(
        width: 249,
        child: Drawer(
          child: Stack(
            //  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop)
            children: <Widget>[
              Image.network(
                userPicUrl,
                height: MediaQuery.of(context).size.height,
                fit: BoxFit.cover,
              ),
              Container(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 16.0, sigmaY: 16.0),
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.lightBlueAccent.withOpacity(0.5)),
                  ),
                ),
              ),
              Positioned(
                left: 150,
                top: 100,
                height: 100.0,
                width: 100.0,
                child: InkWell(
                  onTap: () async {
                    /*imageFile =
                    await ImagePicker.pickImage(source: ImageSource.gallery);*/
                    setState(() {});
                  },
                  splashColor: Colors.lightGreenAccent,
                  highlightColor: Colors.pinkAccent.withOpacity(0.5),
                  child: Icon(
                    Icons.image,
                    size: 24,
                    color: Colors.transparent,
                  ),
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 12.0),
                    child: SafeArea(
                      child: ClipRRect(
                        child: Container(
                          height: 120,
                          width: 120,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(64),
                            border: Border(
                                right: BorderSide(width: 2, color: Colors.white),
                                left: BorderSide(width: 2, color: Colors.white),
                                top: BorderSide(width: 2, color: Colors.white),
                                bottom:
                                    BorderSide(width: 2, color: Colors.white)),
                            image: DecorationImage(
                                image: NetworkImage(userPicUrl),
                                fit: BoxFit.fitHeight),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Text(
                    "ژینەر حەیدەر تەها",
                    textAlign: TextAlign.center,
                    maxLines: 2,
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.w600),
                  ),
                  Text(
                    "C6-1",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.w900),
                  ),
                  Spacer(),
                  Column(
                    children: drawerItems.map((item) {
                      return ListTile(
                        leading: Icon(
                          item.icon,
                          size: 28,
                          color: Colors.white,
                        ),
                        title: Text(
                          item.title,
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      );
                    }).toList(),
                  ),
                  Spacer(),
                  ListTile(
                    leading: Icon(
                      Icons.exit_to_app,
                      size: 28,
                      color: Colors.white,
                    ),
                    title: Text(
                      "Sign Out",
                      style: TextStyle(
                          fontSize: 16,
                          color: Colors.white,
                          fontWeight: FontWeight.w400),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
5ssjco0h

5ssjco0h3#

class EchoBackdropFilterWidget extends StatefulWidget {
  const EchoBackdropFilterWidget(
      {super.key, required this.child, this.alignment});

  final Widget child;
  final Alignment? alignment;

  @override
  State<EchoBackdropFilterWidget> createState() =>
      _EchoBackdropFilterWidgetState();
}

class _EchoBackdropFilterWidgetState extends State<EchoBackdropFilterWidget> {
  double _drawerWidth = 0;
  double _drawerHeight = 0;

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback(
      (_) => {
        setState(() {
          _drawerWidth = context.size!.width;
        })
      },
    );
    WidgetsBinding.instance.addPostFrameCallback(
      (_) => {
        setState(() {
          _drawerHeight = context.size!.height;
        })
      },
    );
    return Stack(
      children: [
        ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Container(
              alignment: widget.alignment,
              width: _drawerWidth,
              height: _drawerHeight,
            ),
          ),
        ),
        widget.child
      ],
    );
  }
}

...
    drawer: EchoBackdropFilterWidget(
        child: Drawer(
          backgroundColor: Colors.transparent,
          elevation: 0,
          child: Container(
            alignment: Alignment.center,
            child: Text('as'),
          ),
        ),
      ),
      drawerScrimColor: Colors.transparent
...

演示[1]:https://i.stack.imgur.com/nJx0B.png

相关问题