Skip to content

Instantly share code, notes, and snippets.

@funwithflutter

funwithflutter/transform_perspective_demo.dart

Last active August 10, 2021 22:03
Show Gist options
  • Save funwithflutter/aca36780ae842a8858b72994a63324e7 to your computer and use it in GitHub Desktop.
Save funwithflutter/aca36780ae842a8858b72994a63324e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. funwithflutter revised this gist Aug 10, 2021. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions transform_perspective_demo.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,10 @@
    ///
    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());
    void main() => runApp(const MyApp());

    class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    @@ -16,12 +17,14 @@ class MyApp extends StatelessWidget {
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: PerspectiveDemo(),
    home: const PerspectiveDemo(),
    );
    }
    }

    class PerspectiveDemo extends StatefulWidget {
    const PerspectiveDemo({Key? key}) : super(key: key);

    @override
    _PerspectiveDemoState createState() => _PerspectiveDemoState();
    }
    @@ -62,7 +65,7 @@ class _PerspectiveDemoState extends State<PerspectiveDemo> {
    height: 100,
    width: 100,
    color: Colors.blue,
    child: Center(
    child: const Center(
    child: Text('Hello, world!'),
    ),
    ),
    @@ -74,3 +77,4 @@ class _PerspectiveDemoState extends State<PerspectiveDemo> {
    );
    }
    }

  2. funwithflutter revised this gist Mar 1, 2020. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions transform_perspective_demo.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -37,8 +37,7 @@ class _PerspectiveDemoState extends State<PerspectiveDemo> {
    body: Center(
    child: Transform(
    transform: Matrix4(
    1, 0, 0,
    0, // This comment is here for formatting reasons. Remove, format, and see what happens
    1, 0, 0, 0, // for formatting
    0, 1, 0, 0,
    0, 0, 1, 0.001,
    0, 0, 0, 1,
  3. funwithflutter revised this gist Mar 1, 2020. 1 changed file with 22 additions and 9 deletions.
    31 changes: 22 additions & 9 deletions transform_perspective_demo.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    /// 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(MyApp());
    @@ -20,13 +20,13 @@ class MyApp extends StatelessWidget {
    );
    }
    }

    class PerspectiveDemo extends StatefulWidget {
    @override
    _PerspectiveDemoState createState() => _PerspectiveDemoState();
    }

    class _PerspectiveDemoState extends State<PerspectiveDemo> {

    double x = 0;
    double y = 0;
    double z = 0;
    @@ -37,11 +37,15 @@ class _PerspectiveDemoState extends State<PerspectiveDemo> {
    body: Center(
    child: Transform(
    transform: Matrix4(
    1,0,0,0,
    0,1,0,0,
    0,0,1,0.001,
    0,0,0,1,
    )..rotateX(x)..rotateY(y)..rotateZ(z),
    1, 0, 0,
    0, // This comment is here for formatting reasons. Remove, format, and see what happens
    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) {
    @@ -54,11 +58,20 @@ class _PerspectiveDemoState extends State<PerspectiveDemo> {
    color: Colors.black,
    height: 200.0,
    width: 200.0,
    child: FlutterLogo(size:100)
    child: Center(
    child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
    child: Center(
    child: Text('Hello, world!'),
    ),
    ),
    ),
    ),
    ),
    ),
    ),
    );
    }
    }
    }
  4. funwithflutter created this gist Mar 1, 2020.
    64 changes: 64 additions & 0 deletions transform_perspective_demo.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    /// 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(MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Perspective',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: PerspectiveDemo(),
    );
    }
    }
    class PerspectiveDemo extends StatefulWidget {
    @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,
    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: FlutterLogo(size:100)
    ),
    ),
    ),
    ),
    );
    }
    }