Question 79350 in Flutter Question posted in
The official Flutter documentation can be found here.

Blur background in Flutter

anybody knows how to add a blur background here enter image description here

Here the code of this screen:

 return MaterialApp(
            debugShowCheckedModeBanner: false,
            home: Scaffold(
              backgroundColor: Colors.amber,
              body: Container(
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                      Color.fromRGBO(255, 226, 89, 1),
                      Color.fromRGBO(255, 167, 81, 1),
                    ])),
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 100.h),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                          padding: EdgeInsetsDirectional.fromSTEB(
                              10.h, 10.w, 10.h, 10.w),

Anybody knows how to do that?

Tags:

3

Answers


  1. 0

    You can use blur library to make blur effects.

    Check all extensions that the library provides it can be very useful to meet your requirements.

    enter image description here

    Login or Signup to reply.
  2. 0

    To blur the background color, we can use BackdropFilter widget

    BackdropFilter(
   filter: ImageFilter.green(sigmaX: _sigmaX, sigmaY: _sigmaY),
   child: Container(
      color: Colors.grey.withOpacity(_opacity),
   ),
),

    Easy way to blur an image Background, We can also use BackdropFilter widget

    Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new ExactAssetImage('assets/image.png'),
        fit: BoxFit.cover,
      ),
    ),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
      child: new Container(
        decoration: new BoxDecoration(color: Colors.white.withOpacity(0.1)),
      ),
    ),
  ),
    Login or Signup to reply.
  3. 0 
     return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.amber,
          body: Container(
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                  Color.fromRGBO(255, 226, 89, 1),
                  Color.fromRGBO(255, 167, 81, 1),
                ])),
            child: BackdropFilter (filter: imageFilter.blur(required parameter)child: YourWidget)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search