fanim02

fanim02Warmup.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 {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          SafeArea(
            child: 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: 200.0, end: 400.0).animate(_at!);
    super.initState();
  }

  bool check = false;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 10.0+MediaQuery.of(context).padding.top,
      child: Container(
        child: Column(
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  width: _anim?.value ?? 200.0,
                  height: _anim?.value ?? 200.0,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red, width: 2.0),
                    borderRadius: BorderRadius.circular(20.0)
                  ),
                ),
                !check
                ? Container()
                : Positioned(
                  top: 20.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.yellowAccent,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                  ),
                ),
                !check
                ? Container()
                : Positioned(
                  bottom: 20.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.yellowAccent,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                  ),
                ),
                !check
                ? Container()
                : Positioned(
                  top: (_anim?.value ?? 0) *0.5-50,
                  left: 20.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.yellowAccent,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                  ),
                ),
                !check
                ? Container()
                : Positioned(
                  top: (_anim?.value ?? 0) *0.5-50,
                  right: 20.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                      color: Colors.yellowAccent,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                  ),
                ),
                InkWell(
                  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: !check ? Colors.red : Colors.yellowAccent,
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    alignment: Alignment.center,
                    child: Text("Click",style: TextStyle(color: !check ? Colors.white : Colors.red, fontWeight: FontWeight.bold, fontSize: 24.0),),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}