Блог

Главная - Вопросы по программированию - У меня есть приложение для профиля, в котором есть фоновая фотография, которую можно размыть. Как добавить фоновый фильтр к следующему изображению декорации?

У меня есть приложение для профиля, в котором есть фоновая фотография, которую можно размыть. Как добавить фоновый фильтр к следующему изображению декорации?

#image #flutter #flutter-layout #blur

Вопрос:

    Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: size.height * 0.4,
                decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/user2.jpg"),
                      fit: BoxFit.cover,
                    ),
                ),
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: size.height * 0.125,
                    ),
                    Container(
                      height: 100,
                      width: 100,
                      //Circle Avatar
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(50),
                        child: Image.asset(
                          'assets/images/user2.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),

Ответ №1:

Попробуйте этот код с BackdropFilter :

     Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: size.height * 0.4,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/user2.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.0),
                ),
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: size.height * 0.125,
                    ),
                    Container(
                      height: 100,
                      width: 100,
                      //Circle Avatar
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(50),
                        child: Image.asset(
                          'assets/images/user2.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
Метки: , ,