Last active
August 10, 2021 22:03
-
-
Save funwithflutter/aca36780ae842a8858b72994a63324e7 to your computer and use it in GitHub Desktop.
A demo showcasing perspective and transform manipulation in Flutter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// This example is slightly adapted from | |
| /// https://medium.com/flutter-community/advanced-flutter-matrix4-and-perspective-transformations-a79404a0d828 | |
| /// and | |
| /// https://medium.com/flutter/perspective-on-flutter-6f832f4d912e | |
| /// | |
| import 'package:flutter/material.dart'; | |
| void main() => runApp(const MyApp()); | |
| class MyApp extends StatelessWidget { | |
| const MyApp({Key? key}) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Perspective', | |
| debugShowCheckedModeBanner: false, | |
| theme: ThemeData( | |
| primarySwatch: Colors.blue, | |
| ), | |
| home: const PerspectiveDemo(), | |
| ); | |
| } | |
| } | |
| class PerspectiveDemo extends StatefulWidget { | |
| const PerspectiveDemo({Key? key}) : super(key: key); | |
| @override | |
| _PerspectiveDemoState createState() => _PerspectiveDemoState(); | |
| } | |
| class _PerspectiveDemoState extends State<PerspectiveDemo> { | |
| double x = 0; | |
| double y = 0; | |
| double z = 0; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Center( | |
| child: Transform( | |
| transform: Matrix4( | |
| 1, 0, 0, 0, // for formatting | |
| 0, 1, 0, 0, | |
| 0, 0, 1, 0.001, | |
| 0, 0, 0, 1, | |
| ) | |
| ..rotateX(x) | |
| ..rotateY(y) | |
| ..rotateZ(z), | |
| alignment: FractionalOffset.center, | |
| child: GestureDetector( | |
| onPanUpdate: (details) { | |
| setState(() { | |
| y = y - details.delta.dx / 100; | |
| x = x + details.delta.dy / 100; | |
| }); | |
| }, | |
| child: Container( | |
| color: Colors.black, | |
| height: 200.0, | |
| width: 200.0, | |
| child: Center( | |
| child: Container( | |
| height: 100, | |
| width: 100, | |
| color: Colors.blue, | |
| child: const Center( | |
| child: Text('Hello, world!'), | |
| ), | |
| ), | |
| ), | |
| ), | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment