代码之家 › 专栏 › 技术社区 › chichi

如何在flatter中模糊DecorationImage的背景图像?

flutter

chichi · 技术社区 · 4 年前

我试图应用这个问题的答案。 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)),
          ),
        ),

0 回复 | 直到 4 年前

Yauhen Sampir 4 年前

检查图像

  @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),
                      ),
                    ],
                  ),
                ),
              ))),
    );

Vinay H P 4 年前

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),
              ),
            ],
          ),
         ),
        ),
       ),
      ), 
     );
   }
}

这应该符合你的要求。。