Skip to content

Instantly share code, notes, and snippets.

@frankie-yanfeng
Forked from webianks/main.dart
Last active July 1, 2020 16:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frankie-yanfeng/239a0a016452d9f86d8026cf391704b8 to your computer and use it in GitHub Desktop.
Save frankie-yanfeng/239a0a016452d9f86d8026cf391704b8 to your computer and use it in GitHub Desktop.
Scanning Animation In Flutter
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scanning_aimation/scanner.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
debugShowCheckedModeBanner: false,
title: 'Photo Scanner',
home: ScannerScreen(),
theme: CupertinoThemeData(
brightness: Brightness.dark
),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:scanning_aimation/scanner_widget.dart';
class ScannerScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ScannerScreenState();
}
}
class ScannerScreenState extends State<ScannerScreen>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
bool _animationStopped = false;
String scanText = "Scan";
bool scanning = false;
@override
void initState() {
_animationController = new AnimationController(
duration: new Duration(seconds: 1), vsync: this);
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animateScanAnimation(true);
} else if (status == AnimationStatus.dismissed) {
animateScanAnimation(false);
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(middle: Text("Scanning Animation")),
child: SafeArea(
child: Container(
height: double.infinity,
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: CupertinoColors.white),
borderRadius:
BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: Image(
width: 334,
image: NetworkImage(
"https://images.pexels.com/photos/1841819/pexels-photo-1841819.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260")),
),
),
),
ImageScannerAnimation(
_animationStopped,
334,
animation: _animationController,
)
]),
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: CupertinoButton(
color: CupertinoColors.activeGreen,
onPressed: () {
if (!scanning) {
animateScanAnimation(false);
setState(() {
_animationStopped = false;
scanning = true;
scanText = "Stop";
});
} else {
setState(() {
_animationStopped = true;
scanning = false;
scanText = "Scan";
});
}
},
child: Text(scanText),
),
)
])),
),
);
}
void animateScanAnimation(bool reverse) {
if (reverse) {
_animationController.reverse(from: 1.0);
} else {
_animationController.forward(from: 0.0);
}
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
import 'package:flutter/animation.dart';
import 'package:flutter/cupertino.dart';
class ImageScannerAnimation extends AnimatedWidget {
final bool stopped;
final double width;
ImageScannerAnimation(this.stopped, this.width,
{Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
final scorePosition = (animation.value * 440) + 16;
Color color1 = Color(0x5532CD32);
Color color2 = Color(0x0032CD32);
if (animation.status == AnimationStatus.reverse) {
color1 = Color(0x0032CD32);
color2 = Color(0x5532CD32);
}
return new Positioned(
bottom: scorePosition,
left: 16.0,
child: new Opacity(
opacity: (stopped) ? 0.0 : 1.0,
child: Container(
height: 60.0,
width: width,
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.9],
colors: [color1, color2],
)),
)));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment