I recently learned about 3D perspective in Flutter through a blog post.

The effect is to follow the touch of the finger and make 3D rotation of the interface.

// v2: add Gesture detector import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Perspective', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); // changed @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { Offset _offset = Offset.zero; // changed @override Widget build(BuildContext context) { return Transform( // Transform widget transform: Matrix4.identity() // Generates an identity matrix.. SetEntry (3, 2, 0.001) // Perspective.. RotateX (0.01 * _offset.dy) // changed.. RotateY (-0.01 * _offset. Dx), // Changed alignment: FractionalOffset. Center, child: GestureDetector(// new onPanUpdate: (details) => setState(() => _offset += details.delta), // The pointer that touches the screen and moves moves onDoubleTap again: () => setState(() => _offset = Offset.zero), child: _defaultApp(context), )); } _defaultApp(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment. Center, children: [Text (' 3 d effect,),),),),); }}Copy the code

The main use is Transform. Transform is used to do matrix transformations.

First generate an identity matrix with matrix4.identity (). And then through.. SetEntry (3, 2, 0.001) to set the third row and second column of the matrix to 0.001. The effect is similar to setting the distance between the object and the camera. The farther away the object looks smaller, and the closer it looks bigger.

. RotateX and.. RotateY is changing the value of the X and y axis separately, where multiplying by 0.01 is a compression of the value. (The X and Y values change because you rotate on the Z axis, which is perpendicular to the screen).

Finally, the distance of finger movement is obtained through the GestureDetector component, and the double click reset operation is added.