Nilen Patel Inc.

Tutorial and code of Tilt 3D Effect in Flutter. Copy and paste the below code as per your requirements.

hover_effect: ^0.6.0

import 'package:flutter/material.dart';
import 'package:hover_effect/hover_effect.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tilt 3D Effect',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Material(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Tilt 3D Effect',
              style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.w700,
                  color: Colors.black,
                  letterSpacing: 2),
            ),
            const SizedBox(height: 50),
            SizedBox(
              width: 150,
              height: 300,
              child: HoverCard(
                builder: (context, hovering) {
                  return Container(
                    color: const Color(0xFFE9E9E9),
                    child: const Center(
                      child: FlutterLogo(size: 100),
                    ),
                  );
                },
                depth: 10,
                depthColor: Colors.grey[500],
                onTap: () => print('Hello, World!'),
                shadow: const BoxShadow(color: Colors.purpleAccent, blurRadius: 30, spreadRadius: -20, offset: Offset(0, 40)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}