Flutter: Is ImageFilter.blur and BackdropFilter expensive if used as a background

Question

I am making a flutter app with glass effect so I use *** ImageFilter.blur and BackdropFilter *** in every screen.

Is this so expensive for the performance?

here is the code

 body: SizedBox(
          width: screenWidth,
          height: screenHeight,
          child: Stack(
            children: [
              Positioned(
                top: screenHeight * 0.1,
                left: -128,
                child: Container(
                  height: 186,
                  width: 186,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromARGB(255, 15, 196, 206),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 200,
                      sigmaY: 200,
                    ),
                    child: Container(
                      height: 166,
                      width: 166,
                      color: const Color.fromARGB(0, 145, 62, 62),
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: screenHeight * 0.1,
                right: -128,
                child: Container(
                  height: 186,
                  width: 186,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromARGB(255, 15, 196, 206),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 200,
                      sigmaY: 200,
                    ),
                    child: Container(
                      height: 166,
                      width: 166,
                      color: const Color.fromARGB(0, 145, 62, 62),
                    ),
                  ),
                ),
              ),
              Positioned(
                child: Container(
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                        opacity: 0.1,
                        image: AssetImage('assets/images/logo.png')),
                  ),
                ),
              )

this is the background of every screen.

If this is not a good way to do it what is ?

and is using MediaQuery for height and width a lot also slows down performance?

thanks a lot

I tried the code above and the app was a bit slow for flutter release, was that the reason or should I look somewhere else.

Answer 1

Can you try this and see if this is something you want to achieve

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          useMaterial3: true,
        ),
        home: const MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final screenWidth = mediaQuery.size.width;
    final screenHeight = mediaQuery.size.height;

    return Scaffold(
      body: SizedBox(
        width: screenWidth,
        height: screenHeight,
        child: Stack(
          children: [
            Positioned(
              top: screenHeight * 0.1,
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                    sigmaX: 150, sigmaY: 150, tileMode: TileMode.decal),
                child: Transform.translate(
                  offset: const Offset(-128, 0),
                  child: const DecoratedBox(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color.fromARGB(255, 15, 196, 206),
                    ),
                    child: SizedBox(
                      height: 186,
                      width: 186,
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: screenHeight * 0.1,
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                    sigmaX: 150, sigmaY: 150, tileMode: TileMode.decal),
                child: Transform.translate(
                  offset: Offset(screenWidth + 128 - 186, 0),
                  child: const DecoratedBox(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color.fromARGB(255, 15, 196, 206),
                    ),
                    child: SizedBox(
                      height: 186,
                      width: 186,
                    ),
                  ),
                ),
              ),
            ),
            const Positioned(
              child: DecoratedBox(
                decoration: BoxDecoration(
                  image: DecorationImage(
                      opacity: 0.1,
                      image: AssetImage('assets/images/logo.png')),
                ),
                child: SizedBox.expand(),
              ),
            )
          ],
        ),
      ),
    );
  }
}