Light effect by Mariano Zorrilla

light-effect-by-mariano-zorrilla.markdown

Light effect by Mariano Zorrilla

A Pen by Zoey Fan on CodePen.

License.

script.flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: HomeScreen());
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Container(
            color: Color.fromRGBO(52, 53, 64, 1.0),
            //color: Color.fromRGBO(11,0,0, 1.0),
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Center(
              child: _Body(),
            ),
          ),
        ],
      ),
    );
  }
}

class _Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<_Body> {
  double localX = 0;
  double localY = 0;
  bool defaultPosition = true;

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    double percentageX = (localX / (size.width - 40)) * 100;
    double percentageY = (localY / 230) * 100;
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateX(defaultPosition ? 0 : (0.3 * (percentageY / 50) + -0.3))
        ..rotateY(defaultPosition ? 0 : (-0.3 * (percentageX / 50) + 0.3)),
      alignment: FractionalOffset.center,
      child: Container(
        width: double.infinity,
        height: 230,
        decoration: BoxDecoration(
          color: Color(0xFFCCCCCC),
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
                offset: Offset(0, 60),
                color: Color.fromARGB(120, 0, 0, 0),
                blurRadius: 22,
                spreadRadius: -20),
          ],
        ),
        child: GestureDetector(
          onPanCancel: () => setState(() => defaultPosition = true),
          onPanDown: (_) => setState(() => defaultPosition = false),
          onPanEnd: (_) => setState(() {
            localY = 115;
            localX = (size.width - 40) / 2;
            defaultPosition = true;
          }),
          onPanUpdate: (details) {
            if (mounted) setState(() => defaultPosition = false);
            if (details.localPosition.dx > 0 &&
                details.localPosition.dy < 230) {
              if (details.localPosition.dx < size.width - 40 &&
                  details.localPosition.dy > 0) {
                localX = details.localPosition.dx;
                localY = details.localPosition.dy;
              }
            }
          },
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: Container(
              color: Colors.black,
              child: Stack(
                fit: StackFit.expand,
                children: [
                  Transform(
                    transform: Matrix4.identity()
                      ..translate(
                          defaultPosition ? 0.0 : (8 * (percentageX / 50) + -8),
                          defaultPosition ? 0.0 : (8 * (percentageY / 50) + -8),
                          0.0),
                    alignment: FractionalOffset.center,
                    child: Opacity(
                      opacity: 0.4,
                      child: Image.network(
                        'https://firebasestorage.googleapis.com/v0/b/sfxp-crossplatform.appspot.com/o/resources%2Fcardbg.jpg?alt=media',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Stack(
                    children: <Widget>[
                      Transform(
                        transform: Matrix4.translationValues(
                          (size.width - 90) - localX,
                          (230 - 50) - localY,
                          0.0,
                        ),
                        child: AnimatedOpacity(
                          opacity: defaultPosition ? 0 : 1,
                          duration: Duration(milliseconds: 500),
                          curve: Curves.decelerate,
                          child: Container(
                            height: 100,
                            width: 100,
                            decoration: BoxDecoration(boxShadow: [
                              BoxShadow(
                                color: Colors.white.withOpacity(0.22),
                                blurRadius: 100,
                                spreadRadius: 40,
                              )
                            ]),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Transform(
                    transform: Matrix4.identity()
                      ..translate(
                          defaultPosition
                              ? 0.0
                              : (15 * (percentageX / 50) + -15),
                          defaultPosition
                              ? 0.0
                              : (15 * (percentageY / 50) + -15),
                          0.0),
                    alignment: FractionalOffset.center,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 22),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 22, top: 15),
                              child: Padding(
                                padding: const EdgeInsets.only(top: 5),
                                child: Image.network(
                                    "https://firebasestorage.googleapis.com/v0/b/sfxp-crossplatform.appspot.com/o/resources%2Fsfxp_white.png?alt=media",
                                    width: 90,
                                    color: Colors.white),
                              ),
                            ),
                          ),
                          Expanded(child: Container()),
                          Text(
                            '5048 3817 4921 8497',
                            style: TextStyle(
                              fontFamily: "CreditCard",
                              color: Colors.white.withOpacity(0.9),
                              fontSize: 18,
                            ),
                          ),
                          SizedBox(height: 10),
                          Row(
                            children: [
                              Expanded(child: Container()),
                              Text(
                                'THRU 09/22',
                                style: TextStyle(
                                    fontFamily: "CreditCard",
                                    color: Colors.white.withOpacity(0.8),
                                    fontSize: 12),
                              ),
                            ],
                          ),
                          SizedBox(height: 20),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}