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

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double topPosition = 700;
  double containerHeight = 0;
  double containerWidth = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          setState(() {
            containerHeight = 200;
            containerWidth = MediaQuery.of(context).size.width - 24 * 2;
            topPosition = 100;
          });
        },
        icon: Icon(Icons.payment),
        label: Text("Payment"),
      ),
      body: Stack(
        children: <Widget>[
          AnimatedPositioned(
            curve: Curves.elasticOut,
            duration: Duration(milliseconds: 2800),
            child: AnimatedContainer(
              alignment: Alignment.center,
              duration: Duration(milliseconds: 300),
              margin: EdgeInsets.symmetric(horizontal: 24.0),
              width: containerWidth,
              height: containerHeight,
              child: //Credit Card
            ),
            top: topPosition
          )
        ]
      )
    );
  }
}