[Android advanced] flutter radar scanning effect and flutter rotary scanning

Time:2022-5-13

design sketch:
[Android advanced] flutter radar scanning effect and flutter rotary scanning
1 . Test demo startup file

main() {
  runApp(MaterialApp(
    home: SignSwiperPage(),
  ));
}

class SignSwiperPage extends StatefulWidget {
  @override
  _SignSwiperPageState createState() => _SignSwiperPageState();
}

class _SignSwiperPageState extends State<SignSwiperPage>
    with SingleTickerProviderStateMixin {

}

The next code is_ Written in signswiperpagestate

2 . Animation controllers are used to achieve rotation

//Animation controller
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    //Create
    _animationController = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));
    //Add to event queue
    Future.delayed(Duration.zero, () {
      //Animation repeat
      _animationController.repeat();
    });
  }

  @override
  void dispose() {
    //Destroy
    _animationController.dispose();
    super.dispose();
  }

3 . Rotating scanning effect

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Swiper Demo"),
      ),
      backgroundColor: Colors.white,
      //Center
      body: Center(
        //Cascade layout
        child: Stack(
          children: [
            //Round clipping of the background of the first layer
            ClipOval(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
            ),
            //Scanning of the second layer
            buildRotationTransition(),
          ],
        ),
      ),
    );
  }

Rotationtransition is used to realize rotation animation

RotationTransition buildRotationTransition() {
    //Rotate animation 
    return RotationTransition(
      //Animation controller
      turns: _animationController,
      //Circular clipping
      child: ClipOval(
        //Scan gradient
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            //Scan gradient
            gradient: SweepGradient(colors: [
              Colors.white.withOpacity(0.2),
              Colors.white.withOpacity(0.6),
            ]),
          ),
        ),
      ),
    );
  }

Recommended Today

Scheduling and switching of soul torture

Torture the soul of scheduling and switching to see if the operating system course you studied in university has learned the true skills of the teacher? If you don’t answer correctly, it means that you sleep, skip classes, speculate in stocks, play games and chat with female classmates in class Doubts about scheduling and switchingMany […]