fanim022

fanim02Design.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Main(),);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.purple,
            child: SingleChildScrollView(
              child: Container(
                width: MediaQuery.of(context).size.width,
                child: Column(
                  children: List.generate(10, (int i) => i).map<Widget>(
                    (int e) => Container(
                      margin: EdgeInsets.symmetric(vertical: 100.0),
                      child: Text(
                        e.toString(),
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                    )
                  ).toList(),
                ),
              ),
            ),
          ),
          Anim()
        ],
      ),
    );
  }
}
class Anim extends StatefulWidget {
  const Anim({Key? key}) : super(key: key);

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

class _AnimState extends State<Anim> with SingleTickerProviderStateMixin{

  AnimationController? _at;
  Animation<double>? _anim;

  @override
  void initState() {
    _at = AnimationController(vsync: this, duration: Duration(milliseconds: 300))
    ..addListener(() {
      if(!mounted) return;
      setState(() {});
    });
    _anim = Tween<double>(begin: 100.0, end: 340.0).animate(_at!);
    super.initState();
  }

  bool check = false;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 10.0+MediaQuery.of(context).padding.top,
      left: 20.0,
      child: Container(
        child: Column(
          children: [
            Stack(
              children: [
                Container(
                  width: 100.0,
                  height: _anim?.value ?? 100.0,
                ),
                !check
                ? Container()
                : Positioned(
                  top: 120.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    child: IconButton(
                      icon: Icon(Icons.favorite, color: Colors.red),
                      onPressed: (){
                        _at?.reverse();
                        check = false;
                      },
                    ),
                  ),
                ),
                !check
                ? Container()
                : Positioned(
                  top: 240.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    child: IconButton(
                      icon: Icon(Icons.person, color: Colors.red,),
                      onPressed: (){
                        _at?.reverse();
                        check = false;
                      },
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    if(_at == null || _anim == null) return;
                    if(_at!.isAnimating) return;
                    if(_at!.isCompleted){
                      _at!.reverse();
                      check = false;
                      return;
                    }
                    check = true;
                    _at?.forward();
                    return;
                  },
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    alignment: Alignment.center,
                    child: !check ? Icon(Icons.send, color: Colors.red,) : Icon(Icons.close, color: Colors.grey,),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}