Search code examples
fluttermobile-application

Google Flutter's rotationX perspective


I'm new to Google Flutter. As a web developer, I used to work with CSS. Here is the a fiddle that I want to achieve in Google Flutter:

https://jsfiddle.net/u2p5dzmc/

Here is what I've created so far:

...

  Widget _buildAnimation(BuildContext context, Widget child) {
    return new Container(
      padding: padding.value,
      child: new Container(
        alignment: Alignment.center,
        transform: new Matrix4.identity()..rotateY(-45.0),
        width: width.value,
        height: height.value,
        child: new Image.asset('assets/images/kitten.jpg'),
        decoration: new BoxDecoration(
          border: new Border.all(
            width: 3.0,
          ),
          borderRadius: borderRadius.value,
        ),
      ),
    );
  }

...

I manage to rotate the widget, but don't know how to set the perspective as I usually do in CSS.

Any thoughts?

Thanks.


Solution

  • After digging more information, I found the answer on Flutter's official website: https://flutter.io/faq/

    Can I build 3D (OpenGL) apps with Flutter?

    Today we don’t support for 3D via OpenGL ES or similar. We have long-term plans to expose an optimized 3D API, but right now we’re focused on 2D.

    Update

    There is an article talking about Perspective in Google Flutter here.