rotate

fanim04.dart

import 'package:flutter/material.dart';

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

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

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

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

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

class _MainState extends State<Main> with TickerProviderStateMixin{

  Animation<double>? _anim;
  AnimationController? _ac;
  bool check = false;
  ScrollController? sc;

  @override
  void initState() {
    sc = ScrollController();
    this._ac = AnimationController(vsync: this, duration: Duration(seconds: 2))
      ..addListener(() {
        if(!this.mounted) return;
        setState(() {});
        if(this._ac?.isCompleted ?? false){
          setState(() {});
        }
      });
    this._anim = Tween<double>(begin: 60.0, end: 600).animate(this._ac!);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: -40.0,
            right: -60.0,
            child: Anim(
              mImg: "https://cdn.pixabay.com/photo/2011/12/13/14/30/mars-11012__480.jpg",
              anim: (AnimationController? c) => c?.repeat(),
            ),
          ),
          Positioned(
            top: 280.0,
            left: -80.0,
            child: Anim(
              mImg: "https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022__480.jpg",
              anim: (AnimationController? c) => c?.repeat(),
            ),
          ),
          Positioned(
            bottom: -60.0,
            child: Anim(
              mImg: "https://cdn.pixabay.com/photo/2012/11/28/09/17/neptune-67537__480.jpg",
              anim: (AnimationController? c) => c?.repeat(),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Center(
              child: check ?
                  Container(
                    width: MediaQuery.of(context).size.width-100.0,
                    height: this._anim?.value ?? 80.0,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(20.0),
                      border: Border.all(color: Colors.blue, width: 10.0),
                    ),
                    child: !(this._ac?.isCompleted??false)
                      ? Container()
                      : ListView.builder(
                          controller: this.sc,
                          // physics: NeverScrollableScrollPhysics(),
                          padding: EdgeInsets.only(top: 10.0),
                          itemCount: 21,
                          itemBuilder: (BuildContext context, int index) => index == 20
                            ? Container(
                                child: IconButton(
                                  icon: Icon(Icons.close),
                                  color: Colors.white,
                                  onPressed: (){
                                    this._ac?.reverse();
                                    setState(() {
                                      this.check = !this.check;
                                    });
                                  }
                                )
                              )
                          : Container(
                            margin: EdgeInsets.only(bottom: 20.0, left: 10.0, right: 10.0),
                            padding: EdgeInsets.all(40.0),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            alignment: Alignment.center,
                            child: Text(
                              "${index+1}팀",
                              style: TextStyle(
                                color: Colors.blue,
                                fontWeight: FontWeight.bold,
                                fontSize: 20.0
                              ),
                            )
                          )
                    ),
                  ): MaterialButton(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    color: Colors.blue,
                    textColor: Colors.white,
                    minWidth: MediaQuery.of(context).size.width-100.0,
                    height: 60.0,
                    child: Text(
                      "PPlanet99999",
                      style: TextStyle(
                        fontSize: 24.0,
                        fontWeight: FontWeight.bold
                      ),
                    ),
                    onPressed: (){
                      if(this._ac == null) return;
                      this.check = true;
                      this._ac?.forward();
                    },
                  ),
            ),
          )
        ],
      ),
    );
  }
}

class Anim extends StatefulWidget {
  final String mImg;
  void Function(AnimationController? ct) anim;
  Anim({Key? key, required this.anim, required this.mImg}) : super(key: key);

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

class _AnimState extends State<Anim> with SingleTickerProviderStateMixin{

  Animation<double>? _anim;
  AnimationController? _ac;

  @override
  void initState() {
    this._ac = AnimationController(vsync: this, duration: Duration(seconds: 8))
      ..addListener(() {
        if(!this.mounted) return;
        setState(() {});
      });
    this._anim = Tween<double>(begin: 0, end: 6.28).animate(this._ac!);
    widget.anim(this._ac);
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Transform.rotate(
            angle: this._anim?.value ?? 0,
            child: Stack(
              children: [
                Container(
                  width: 300.0,
                  height: 300.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(200.0),
                    color: Colors.blueAccent,
                    border: Border.all(color: Colors.blueAccent, width: 6.0)
                  ),
                  alignment: Alignment.center,
                ),
                Positioned(
                  top: 50.0,
                  child: Container(
                    width: 50.0,
                    height: 50.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(50.0),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}