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

Flutter – Blur filter not showing Transform widget based on angle

In the following code nothing is displayed if the angle of the innermost Transform widget is -90 deg:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vm;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(vm.radians(20))
              ..rotateY(vm.radians(-30)),
            child: Stack(children: [
              Transform(
                alignment: Alignment.topLeft,
                transform: Matrix4.identity()..rotateX(vm.radians(-90)), // (1) Change this angle
                child: Container(
                  width: 100,
                  height: 200,
                  color: Colors.grey.shade200,
                ),
              ),
              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(color: Colors.transparent),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

If I change the angle to -91, the blurred widget is displayed. If the blur filter is removed (by removing the Positioned widget), the rectangle is displayed. How can I get the blurred widget to display if the angle is -90?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've come to the conclusion that using ImageFilter.blur the way I'm doing it does not work in Flutter. Even wrapping the grey Container in my answer with a ImageFiltered widget and not using BackdropFilter does not work.

    However, my goal is to have a rectangle with blurry edges in order to simulate a shadow. I can achieve this by using BoxDecoration for the Container widget:

    import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vm;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(vm.radians(20))
              ..rotateY(vm.radians(-30)),
            child: Transform(
              alignment: Alignment.topLeft,
              transform: Matrix4.identity()
                ..rotateX(vm.radians(-90)),
              child: Container(
                width: 100,
                height: 200,
                decoration: const BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      blurRadius: 10,
                      spreadRadius: 0.5,
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

  2. 0

    When you rotate a widget by 90 degrees around the X-axis (rotateX(vm.radians(-90))), it can cause the widget to disappear because the rotation effectively flips the widget so that it faces away from the camera, making it invisible from the current viewpoint.

    To solve this issue, you can try the following approaches:

    1. Adjust the rotation angle: Instead of rotating by -90 degrees, try a smaller angle like -89 degrees. This will rotate the widget almost vertically but keep it slightly tilted towards the camera, making it partially visible.

    transform: Matrix4.identity()..rotateX(vm.radians(-89)),

    2. Use a different transformation: Instead of rotating around the X-axis, you can try rotating around the Y-axis or Z-axis to achieve the desired effect while keeping the widget visible.

    transform: Matrix4.identity()..rotateY(vm.radians(180)),

    This rotates the widget by 180 degrees around the Y-axis, which flips it horizontally.

    3. Change the widget’s position: If rotating the widget causes it to disappear, you can try adjusting its position in the Stack to ensure it remains visible after the rotation.

     Transform(
  alignment: Alignment.center,
  transform: Matrix4.identity()..rotateX(vm.radians(-90)),
  child: Container(
    width: 100,
    height: 200,
    color: Colors.grey.shade200,
  ),
),

    This are three things you can try

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search