Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I give widgets thickness in the z direction?

I implemented an effect that I found on this medium article https://medium.com/flutter/perspective-on-flutter-6f832f4d912e that allows you rotate widgets in 3d space. My only problem with this is that all of my widgets seem to have no thickness in the z direction so unsightly things like this happen:

App screenshot

My unrotated logo looks like this:

Original Logo

And this is the code I used to create this rotation effect:

import 'package:flutter/material.dart';

class PerspectiveContainer extends StatefulWidget {
  final Widget child;
  PerspectiveContainer({Key key, @required this.child}) : super(key: key);

  @override
  _PerspectiveState createState() => _PerspectiveState();
}

class _PerspectiveState extends State<PerspectiveContainer> {
  Offset _offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001) // perspective
        ..rotateX(0.004 * _offset.dy)
        ..rotateY(-0.004 * _offset.dx),
      alignment: FractionalOffset.center,
      child: GestureDetector(
        onPanUpdate: (details) => setState(() => _offset += details.delta),
        onDoubleTap: () => setState(() => _offset = Offset.zero),
        child: widget.child,
      ),
    );
  }
}

So would it be possible to give my BINGO widget thickness in the z direction?(The bingo logo was made with a Table widget)

like image 976
Anirudh Avatar asked Feb 17 '20 19:02

Anirudh


1 Answers

Material Design works sometimes with shadows and elevation here, which would give you some 3D look, although it is actually 2d. https://material.io/design/environment/elevation.html#elevation-in-material-design

Some Widgets in Flutter have an elevation attribute, e.g. Card.

like image 74
x23b5 Avatar answered Oct 07 '22 21:10

x23b5