Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to realize the slider CAPTCHA function by Flutter". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to realize the slider CAPTCHA function in Flutter" can help you solve the problem.

What this article implements is a function that is used to log in and slide the slider to the right to complete verification. When the slide does not reach the far right, the slider bounces back to the left starting position.

Import 'package:flutter/material.dart'; class SlideVerifyWidget extends StatefulWidget {/ / background color final Color backgroundColor; / / sliding color final Color slideColor; / border color final Color borderColor; final double height; final double width; final VoidCallback verifySuccessListener Const SlideVerifyWidget ({Key key, this.backgroundColor = Colors.blueGrey, this.slideColor = Colors.green, this.borderColor = Colors.grey, this.height = 44, this.width = 240,this.verifySuccessListener}): super (key: key); @ override State createState () {return SlideVerifyState ();}} class SlideVerifyState extends State with TickerProviderStateMixin {double height; double width; double sliderDistance = 0; double initial = 0.0 / the slider width double sliderWidth = 64; / / verify whether it passes. Slide to the far right by bool verifySuccess = false; / whether you are allowed to drag bool enableSlide = true; AnimationController _ animationController; Animation _ curve; @ override void initState () {super.initState (); this.width = widget.width; this.height = widget.height; _ initAnimation () } @ override void dispose () {_ animationController?.dispose (); super.dispose ();} @ override Widget build (BuildContext context) {return GestureDetector (onHorizontalDragStart: (DragStartDetails details) {if (! enableSlide) {return;} initial = details.globalPosition.dx;}, onHorizontalDragUpdate: (DragUpdateDetails details) {if (! enableSlide) {return } sliderDistance = details.globalPosition.dx-initial; if (sliderDistance

< 0){ sliderDistance = 0; } /// 当滑动到最右边时，通知验证成功，并禁止滑动 if(sliderDistance >

Width-sliderWidth) {sliderDistance = width-sliderWidth; enableSlide = false; verifySuccess = true; if (widget.verifySuccessListener! = null) {widget.verifySuccessListener ();}} setState (() {}) }, onHorizontalDragEnd: (DragEndDetails details) {/ when sliding is released, if the rightmost part is not reached, start the springback animation if (enableSlide) {enableSlide = false; _ animationController.forward () }, child: Container (height: height, width: width, decoration: BoxDecoration (color: widget.backgroundColor, border: Border.all (color: widget.borderColor), / / fillet borderRadius: BorderRadius.all (new Radius.circular (height) Child: Stack (children: [Positioned (top: 0, left: 0, child: Container (height: height-2, / when the slider slides to only two or three pixels from the left The sliding background will render a little bit out of the border range, / so when the sliding distance is less than 1, set the width to 0 directly to solve the green flicker caused by the slider returning to the left, but if you slowly slide to the left, the problem still does not solve width: sliderDistance

< 1? 0 : sliderDistance + sliderWidth / 2, decoration: BoxDecoration( color: widget.slideColor, /// 圆角实现 borderRadius: BorderRadius.all(new Radius.circular(height / 2)) ), ), ), Center( child: Text(verifySuccess?"验证成功":"请按住滑块，拖动到最右边", style: TextStyle(color: verifySuccess?Colors.white:Colors.black54, fontSize: 14),), ), Positioned( top: 0, /// 此处将sliderDistance距离往左偏2是解决当滑动块滑动到最右边时遮挡外部边框 left: sliderDistance >

SliderWidth? SliderDistance-2: sliderDistance, child: Container (width: sliderWidth, height: height-2, alignment: Alignment.center, decoration: BoxDecoration (color: Colors.white, border: Border.all (color: widget.borderColor) / / fillet implementation borderRadius: BorderRadius.all (new Radius.circular (height)), child: Row (mainAxisAlignment: MainAxisAlignment.center, children: [SizedBox (width: 6,)) Image.asset ("assets/images/ic_safety.png", height: 24, width: 24,), Image.asset ("assets/images/ic_next_primary.png", height: 16, width: 16,), / / the distance between the two arrows is too large because the right arrow has a transparent margin. So offset the second arrow to the left If the cut image is borderless, you do not need to offset Transform (transform: Matrix4.translationValues (- 8,0,0), child: Image.asset ("assets/images/ic_next_primary.png", height: 16, width: 16,),],),) )],) Void _ initAnimation () {_ animationController = AnimationController (duration: const Duration (milliseconds: 300), vsync: this); _ curve = CurvedAnimation (parent: _ animationController, curve: Curves.easeOut); _ curve.addListener () {setState (() {sliderDistance = sliderDistance-sliderDistance * _ curve.value; if (sliderDistance)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.