Flutter中如何模糊DecorationImage的背景图？答案

【问题标题】：How can I blur the background image of DecorationImage in Flutter?Flutter中如何模糊DecorationImage的背景图？
【发布时间】：2021-03-08 17:58:52
【问题描述】：

我正在尝试应用此问题的答案。 Blurred Decoration Image in Flutter

但是，我对模糊背景图像的代码有点困惑。

  @override
  Widget build(BuildContext context) {
    data = ModalRoute.of(context).settings.arguments;
    print(data);

    // set backgroud
    String bgImage = data['isDaytime'] ? 'day.jpg' : 'night.jpg';
    Color bgColor = data['isDaytime'] ? Colors.blue : Colors.red;

    return Scaffold(
      backgroundColor: bgColor,
      body: SafeArea(
        child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
            image: AssetImage('assets/$bgImage'),
            fit: BoxFit.cover,
          )),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 120.0, 0, 0),
            child: Column(
              children: [
                FlatButton.icon(
                  onPressed: () {
                    print('Heheheheheeh');
                    Navigator.pushNamed(context, '/location');
                  },
                  icon: Icon(Icons.edit_location),
                  label: Text('ashidufhiu'),
                ),
                SizedBox(height: 20.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      data['location'],
                      style: TextStyle(
                        fontSize: 34.0,
                        letterSpacing: 2.0,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 20.0),
                Text(
                  data['time'],
                  style: TextStyle(fontSize: 65.0),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我已经在子属性中有一些东西。我试图将它们融入其中。想知道如何将以下解决方案添加到我的代码中？谢谢！

child: new BackdropFilter(
          filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: new Container(
            decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
          ),
        ),

【问题讨论】：

标签： flutter

【解决方案1】：

import 'dart:ui';

@override
Widget build(BuildContext context) {
  data = ModalRoute.of(context).settings.arguments;
  print(data);

  // set backgroud
  String bgImage = data['isDaytime'] ? 'day.jpg' : 'night.jpg';
  Color bgColor = data['isDaytime'] ? Colors.blue : Colors.red;

  return Scaffold(
    backgroundColor: bgColor,
    body: SafeArea(
      child: Container(
        padding: const EdgeInsets.fromLTRB(0, 120.0, 0, 0),
        decoration: BoxDecoration(
            image: DecorationImage(
              image: new ExactAssetImage('assets/$bgImage'),
              fit: BoxFit.cover,
            )),
        child: new BackdropFilter(
          filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: new Container(
            decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
          child: Column(
            children: [
              FlatButton.icon(
                onPressed: () {
                  print('Heheheheheeh');
                  Navigator.pushNamed(context, '/location');
                },
                icon: Icon(Icons.edit_location),
                label: Text('ashidufhiu'),
              ),
              SizedBox(height: 20.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    data['location'],
                    style: TextStyle(
                      fontSize: 34.0,
                      letterSpacing: 2.0,
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20.0),
              Text(
                data['time'],
                style: TextStyle(fontSize: 65.0),
              ),
            ],
          ),
         ),
        ),
       ),
      ), 
     );
   }
}

这应该根据您的要求工作..

【讨论】：

【解决方案2】：

查看图片

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: ExactAssetImage('assets/dog.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: SafeArea(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0, 120.0, 0, 0),
                  child: Column(
                    children: [
                      FlatButton.icon(
                        onPressed: () {
                          print('Heheheheheeh');
                          Navigator.pushNamed(context, '/location');
                        },
                        icon: Icon(Icons.edit_location),
                        label: Text('ashidufhiu'),
                      ),
                      SizedBox(height: 20.0),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            'location',
                            style: TextStyle(
                              fontSize: 34.0,
                              letterSpacing: 2.0,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 20.0),
                      Text(
                        'time',
                        style: TextStyle(fontSize: 65.0),
                      ),
                    ],
                  ),
                ),
              ))),
    );

【讨论】：