上海知名网站制作公司,网站建设的会计核算,张家界建设网站制作,建设银行官网电话flutter开发实战-flutter二维码条形码扫一扫功能实现
flutter开发实战-flutter二维码扫一扫功能实现#xff0c;要使用到摄像头的原生的功能#xff0c;使用的是插件#xff1a;scan
效果图如下 一、扫一扫插件scan # 扫一扫scan: ^1.6.01.1 iOS权限设置
keyNSCa…flutter开发实战-flutter二维码条形码扫一扫功能实现
flutter开发实战-flutter二维码扫一扫功能实现要使用到摄像头的原生的功能使用的是插件scan
效果图如下 一、扫一扫插件scan # 扫一扫scan: ^1.6.01.1 iOS权限设置
keyNSCameraUsageDescription/key
stringYour Description/stringkeyio.flutter.embedded_views_preview/key
stringYES/string1.2 android权限设置
uses-permission android:nameandroid.permission.CAMERA /applicationmeta-dataandroid:nameflutterEmbeddingandroid:value2 /
/application1.3 使用ScanView的widget
ScanController controller ScanController();
String qrcode Unknown;Container(width: 250, // custom wrap sizeheight: 250,child: ScanView(controller: controller,
// custom scan area, if set to 1.0, will scan full areascanAreaScale: .7,scanLineColor: Colors.green.shade400,onCapture: (data) {// do something},),
),扫一扫Widget使用ScanController来做响应的控制
暂停/恢复camera
controller.pause();
controller.resume();识别图片的二维码结果
String result await Scan.parse(imagePath);闪光灯切换
controller.toggleTorchMode();二、代码实现
实现自定义扫码的appBar
class QrScanAppBar extends StatefulWidget {const QrScanAppBar({Key? key,required this.toolbarHeight,this.elevation,this.backgroundColor,this.leadingWidget,this.trailingWidget,this.centerWidget,this.brightness,this.padding, this.barPadding,}) : super(key: key);final double toolbarHeight;final double? elevation;final Color? backgroundColor;final Widget? leadingWidget;final Widget? trailingWidget;final Widget? centerWidget;final Brightness? brightness;final EdgeInsetsGeometry? padding;final EdgeInsetsGeometry? barPadding;overrideStateQrScanAppBar createState() _QrScanAppBarState();
}class _QrScanAppBarState extends StateQrScanAppBar {overrideWidget build(BuildContext context) {final SystemUiOverlayStyle overlayStyle widget.brightness Brightness.dark? SystemUiOverlayStyle.light: SystemUiOverlayStyle.dark;Widget leadingWidget (widget.leadingWidget ?? Container());Widget centerWidget (widget.centerWidget ?? Container());Widget trailingWidget (widget.trailingWidget ?? Container());return AnnotatedRegionSystemUiOverlayStyle(//套AnnotatedRegion是为了增加状态栏控制value: overlayStyle,child: Material(//套Material是为了增加elevationelevation: widget.elevation ?? 0,color: Colors.transparent,child: Container(padding: widget.padding,height: widget.toolbarHeight ScreenUtil().statusBarHeight,decoration: BoxDecoration(color: widget.backgroundColor,),child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: ScreenUtil().statusBarHeight,),Expanded(child: Container(padding: widget.barPadding,height: widget.toolbarHeight,alignment: Alignment.center,child: Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: widget.toolbarHeight,child: leadingWidget,),Expanded(child: Container(alignment: Alignment.center,height: widget.toolbarHeight,child: centerWidget,),),Container(height: widget.toolbarHeight,child: trailingWidget,),],),),)],),),),);}
}实现扫一扫界面
class QrScanPage extends StatefulWidget {const QrScanPage({Key? key, this.arguments}) : super(key: key);final Object? arguments;overrideStateQrScanPage createState() _QrScanPageState();
}class _QrScanPageState extends StateQrScanPage {ScanController scanController ScanController();String qrcode Unknown;bool torchOn false;overridevoid initState() {// TODO: implement initStatesuper.initState();}overridevoid dispose() {// TODO: implement disposescanController.pause();super.dispose();}void changedTorchMode() {scanController.toggleTorchMode();if (torchOn true) {torchOn false;} else {torchOn true;}setState(() {});}void refreshScan() {scanController.resume();}// controller.resume();// controller.pause();// String result await Scan.parse(imagePath);overrideWidget build(BuildContext context) {return Scaffold(body: Stack(children: [buildQrScanView(context),Positioned(child: buildAppBar(context),),],),);}Widget buildQrScanView(BuildContext context) {double width MediaQuery.of(context).size.width;double height MediaQuery.of(context).size.height;double scanW width * 0.75;double scanMY (height - scanW) / 2.0 scanW 15.0;return Container(alignment: Alignment.center,child: Stack(alignment: Alignment.center,children: [ScanView(controller: scanController,// custom scan area, if set to 1.0, will scan full areascanAreaScale: 0.75,scanLineColor: Colors.green.shade400,onCapture: (data) {// do somethingLoggerManager().debug(onCapture:${data});openQrScanWebPage(data);},),Positioned(top: scanMY,child: buildOption(context, scanMY),),],),);}Widget buildAppBar(BuildContext context) {return QrScanAppBar(toolbarHeight: 44.0,backgroundColor: Colors.transparent,padding: EdgeInsets.symmetric(horizontal: 10.0),barPadding: EdgeInsets.symmetric(vertical: 4.0),leadingWidget: Container(alignment: Alignment.center,child: QrscanButton(bgColor: ColorUtil.hexColor(0xA9A9A9),bgHighlightedColor: ColorUtil.hexColor(0xf0f0f0),borderColor: Colors.transparent,onPressed: () {navigatorBack();},borderRadius: 18.0,height: 36.0,width: 36.0,child: ImageHelper.wrapAssetAtImages(icons/ic_scan_navback.png,width: 36.0,height: 36.0,fit: BoxFit.fill,),),),centerWidget: Text(S.of(context).qrScan,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 17,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),trailingWidget: Container(width: 32.0,height: 32.0,),);}Widget buildOption(BuildContext context, double originY) {return Container(height: ScreenUtil().screenHeight - originY,width: ScreenUtil().screenWidth,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(width: 300.0,child: Text(S.of(context).qrScanBottomTip,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color: Colors.white,decoration: TextDecoration.none,),),),SizedBox(height: 25.0,),buildButtons(context),Expanded(child: Container(),),],),);}Widget buildButtons(BuildContext context) {return Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Padding(padding: EdgeInsets.symmetric(horizontal: 20.0),child: QrscanButton(bgColor: ColorUtil.hexColor(0x35fb99),bgHighlightedColor: Colors.green.shade400,onPressed: () {changedTorchMode();},width: 100.0,height: 50.0,borderRadius: 25.0,child: Text((torchOn? S.of(context).qrScanTorchOff: S.of(context).qrScanTorchOn),textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 14,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),),),Padding(padding: EdgeInsets.symmetric(horizontal: 20.0),child: QrscanButton(bgColor: ColorUtil.hexColor(0x35fb99),bgHighlightedColor: Colors.green.shade400,onPressed: () {refreshScan();},width: 100.0,height: 50.0,borderRadius: 25.0,child: Text(S.of(context).qrScanRefresh,textAlign: TextAlign.center,softWrap: true,style: TextStyle(fontSize: 14,color: ColorUtil.hexColor(0xffffff),fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,decoration: TextDecoration.none,),),),),],);}void navigatorBack() {NavigatorPageRouter.pop();}void openQrScanWebPage(String data) {MapString, dynamic args {};args[url] data;/// true保留跳转的当前栈 false 不保留NavigatorPageRouter.pushReplacementNamed(RouterName.web,arguments: args,);}
}三、小结
flutter开发实战-flutter二维码扫一扫功能实现要使用到摄像头的原生的功能使用的是插件scan实现自定义Appbar。
学习记录每天不停进步。
