3D Card In Flutter
in this flutter tutorial we will learn how to design 3D card in flutter
there are some parameters for transform widget
transform :
Matrix to transform…
alignment :
Alignment of the origin
child :
Widget on which Transformation occurs
first we need to create a matrix.for create a 3D transform matrix we use Matrix4
in our case
Matrix4 get _cardTransformation => Matrix4.identity()
second step is Set the perspective
Setting row 3, column 2 of the matrix to 0.011 scales things down based on their distance. that means 3 rows and 2 columns in our case
setEntry(3, 2, 0.0011)
3 rows and 2 columns and 0.0011 is a perspective number
Set the rotation / Tilting the axis….
..rotateX(_angle.dx) ..rotateY(_angle.dy);
Study this flutter tutorial for know more about 3D Card In Flutter
Screenshot :

3DCard.dart
import 'dart:math'; import 'dart:ui'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Tutorial', theme: ThemeData(visualDensity: VisualDensity.adaptivePlatformDensity), home: Scaffold(body: HomePage())); } } class Card3D extends StatefulWidget { final double height; final double width; final double borderRadius; final Color backgroundColor; final Color borderColor; final Widget child; final bool dragAllowed; final bool autoMove; final Duration animDuration; Card3D( {Key key, this.child, this.dragAllowed = true, this.autoMove = true, this.width = 300.0, this.height = 300.0, this.borderRadius = 20.0, this.animDuration = const Duration(seconds: 5), Color backgroundColor, Color borderColor}) : backgroundColor = backgroundColor ?? Color(0XFF180e43), borderColor = borderColor ?? Color(0xFF2fd6e8), super(key: key); @override _Card3DState createState() => _Card3DState(); } class _Card3DState extends State<Card3D> with SingleTickerProviderStateMixin { Offset _angle = Offset(0, 0); AnimationController _animController; Matrix4 get _cardTransformation => Matrix4.identity() ..setEntry(3, 2, 0.0011) // perspective ..rotateX(_angle.dx) ..rotateY(_angle.dy); Offset get _shadowOffset => Offset(_angle.dy, -_angle.dx).scale(10, 10); double get _shinePosition => 0.3 - _angle.dy - _angle.dx * 2; @override void initState() { super.initState(); _animController = AnimationController( vsync: this, duration: widget.animDuration, value: 0); _animController.addListener(() { setState(() { final val = 2 * pi * _animController.value; _angle = Offset(cos(val), sin(pi / 3 + val)).scale(0.2, 0.6); }); }); _animController.repeat(); } void _onPanUpdate(DragUpdateDetails details) { setState(() { _angle += Offset(details.delta.dy / 100, -details.delta.dx / 100); }); } @override void dispose() { _animController?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return GestureDetector( onPanUpdate: widget.dragAllowed ? _onPanUpdate : null, child: Transform( alignment: Alignment.center, transform: _cardTransformation, // CARD child: Container( width: widget.width, height: widget.height, alignment: Alignment.center, decoration: BoxDecoration( color: widget.backgroundColor, borderRadius: BorderRadius.circular(widget.borderRadius), boxShadow: [ BoxShadow( color: widget.borderColor, blurRadius: 0, spreadRadius: 0, offset: _shadowOffset) ]), child: Stack(children: [ // Content widget.child, // Shine Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(widget.borderRadius), gradient: LinearGradient( begin: Alignment(-1.0, -1.0), end: Alignment(1.0, 1.0), stops: [ _shinePosition - 1, _shinePosition, _shinePosition + 1 ], colors: [ Colors.white.withOpacity(0), Colors.white30, Colors.white.withOpacity(0) ]))) ])))); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return SizedBox.expand( child: Container( alignment: Alignment.center, color: Colors.white, child: Card3D( child: Padding( padding: const EdgeInsets.all(20.0), child: SizedBox.expand( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('Flutter Developer', style: TextStyle( fontSize: 20, color: Colors.white, fontWeight: FontWeight.w900)), Text('Kamlesh', style: TextStyle( fontSize: 20, color: Colors.white, fontWeight: FontWeight.w900)), Image.asset('assets/images/user_profile.png', width: 100, height: 100) ])))))); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in