前言

上一篇博客就大致讲了一下qrscan这个插件的使用，没有具体的实现，这篇博客就来个实战吧，来做一个反盗版商品的例子

准备工具

这套课程是采用Android Studio进行开发的。当前在此之前请准备好Flutter开发环境，我这里就不进行讲解了，基础知识请到条形码和二维码扫描这篇博客学习

配置后端接口

本次项目主要是调用公开的api，可能没有及时的更新，商品的信息有点些出入
创建一个config文件夹，创建一个service_url.dart文件

const serviceUrl='http://www.mxnzp.com';
const servicePath={'getProductMessage':serviceUrl+'/api/barcode/goods/details',  //获取活动信息
};

编写调用接口方法

创建一个service文件夹，创建一个service_method.dart

import 'package:dio/dio.dart';
import 'dart:async';
import '../config/service_url.dart';// 获取商品的信息
Future request(barcode) async{try {print('开始获取信息');Response response;Dio dio=new Dio();String barCode=barcode.toString();var data={"barcode":barCode};print(data);response=await dio.get("http://www.mxnzp.com/api/barcode/goods/details",queryParameters: data);print(response.data['code']);if(response.data['code']==1){print(response.data['data']);return response.data['data'];}else{throw Exception('后端端口异常');}} catch (e) {return print('ERROR:=========>${e}');}
}

页面布局

采用卡片布局，感觉代码蛮简单的，就不给大家解释了，直接上代码

import 'package:flutter/material.dart';
import 'package:qrscan/qrscan.dart' as scanner;
import './service/service_method.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {MyApp({Key key}) : super(key: key);_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {String barcode = null;@overrideinitState() {super.initState();}@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: Scaffold(appBar: AppBar(title: Text('反盗版商品'),),body: Container(margin: EdgeInsets.only(top: 0),child: Column(//mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[FutureBuilder(future: request(barcode),builder: (context,snapshot){if(snapshot.hasData){Map projectItem=snapshot.data;return projectMessage(projectItem:projectItem);}else{return Center(child:Text('请扫描相关的条形码'));}},),//Text(barcode),MaterialButton(onPressed: scan,child: Text("Scan"),color: Colors.blue,textColor: Colors.white,),],),),),);}Future scan() async {try {String barcode = await scanner.scan();setState(() => this.barcode = barcode);} on Exception catch (e) {if (e == scanner.CameraAccessDenied) {setState(() {this.barcode = 'The user did not grant the camera permission!';});} else {setState(() => this.barcode = 'Unknown error: $e');}} on FormatException {setState(() => this.barcode = 'null (User returned using the "back"-button before scanning anything. Result)');} catch (e) {setState(() => this.barcode = 'Unknown error: $e');}}
}class projectMessage extends StatelessWidget {final Map projectItem;const projectMessage({Key key,this.projectItem}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Card(child: Column(children: <Widget>[ListTile(title:new Text('商品名字',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text(projectItem['goodsName']),leading: new Icon(Icons.account_box,color: Colors.lightBlue,),),new Divider(),ListTile(title:new Text('商品价格',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text(projectItem['price']),leading: new Icon(Icons.account_box,color: Colors.lightBlue,),),new Divider(),ListTile(title:new Text('商标名称',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text(projectItem['brand']),leading: new Icon(Icons.account_box,color: Colors.lightBlue,),),new Divider(),ListTile(title:new Text('生产公司',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text(projectItem['supplier']),leading: new Icon(Icons.account_box,color: Colors.lightBlue,),),],),),);}}class Qrscan {}

完整的代码请到我的GitHub观看吧，编写不易，感觉有用的话，请给我一个赞和star吧。

Flutter实战开发（2）------实现条形码扫描获取商品信息相关推荐

全国社保卡服务平台-电子社保卡-二维码扫描-获取个人信息-开发
下载地址全国社保卡服务平台-电子社保卡-二维码扫描-获取个人信息-代码-网络安全文档类资源-CSDN下载全国社保卡服务平台-电子社保卡-二维码扫描-获取个人信息-代码更多下载资源.学习资料请访问CS ...
shopify api php 开发,Shopify插件开发基础篇-获取店铺信息
今天我们讲一下 Shopify 插件应用开发最基础的部分获取店铺信息. 第一步,在开始撸码之前,我们先要获取应用的 API 秘钥第二步,撸码这件事我一贯的原则是不重复造轮子,工具在无明显缺陷情况 ...
十.四轮车驱动开发之三: 巧用编码器获取电机转速信息
这是"四轮车驱动控制"系列,分多个小节来介绍: 1. 八.四轮车驱动开发之一:正/逆向运动学分析 2. 九.四轮车驱动开发之二: 配置PWM驱动直流电机 3. 十.四轮车驱动开发之 ...
根据条形码获取商品信息
根据条形码获取商品信息 function getGoodsInfoByCode(code){commonAjax.commAJAX({//根据条形码的查询url: "/goodsmanage ...
亚马逊国际站通过ASIN获取商品信息
目录亚马逊中国站获取全部商品分类亚马逊中国站获取商品列表亚马逊中国站通过ASIN获取商品信息亚马逊中国站获取商品库存信息亚马逊国际站获取全部商品分类亚马逊国际站获取商品列表亚马逊国际站处 ...
亚马逊中国站通过ASIN获取商品信息
目录亚马逊中国站获取全部商品分类亚马逊中国站获取商品列表亚马逊中国站通过ASIN获取商品信息亚马逊中国站获取商品库存信息亚马逊国际站获取全部商品分类亚马逊国际站获取商品列表亚马逊国际站处 ...
淘宝/天猫API：item_list_weight-批量获取商品信息
万邦淘宝/天猫批量获取商品信息 API 返回值说明 item_list_weight-批量获取商品信息 onebound.taobao.item_list_weight 公共参数请求地址: http ...
爬虫项目实战十一：爬取当当网商品信息
爬取当当网商品信息目标项目准备网站分析页码分析反爬分析代码实现效果显示目标批量爬取当当网商品信息,保存为csv文件到本地. 项目准备软件:Pycharm 第三方库:requests ...
开发实战分享|小程序扫码获取图书信息（内附详细教程）
作者:祈澈姑娘小程序扫码实现读取isbn,获取图书的各种信息接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,受到豆瓣读书系列的启发,决定用云函数做一个项目,获 ...

Flutter实战开发（2）------实现条形码扫描获取商品信息

实现条形码和二维码扫描

前言

准备工具

配置后端接口

编写调用接口方法

页面布局

Flutter实战开发（2）------实现条形码扫描获取商品信息相关推荐

最新文章

热门文章