扫描条码时如何显示进度指示

Question

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.transparent,
// appBar: AppBar(
//   title: Text('Future Demo Page'),
// ),
body: FutureBuilder(
builder: (ctx, snapshot) {
// Checking if future is resolved or not
if (snapshot.connectionState == ConnectionState.done) {
// If we got an error
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error} occured',
style: TextStyle(fontSize: 18),
),
);
// if we got our data
} else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as String;
getGoodsData(data);
// return getGoodsData(data);
}
}
// Displaying LoadingSpinner to indicate waiting state
return Center(
child: CircularProgressIndicator(),
);
},
// Future that needs to be resolved
// inorder to display something on the Canvas
future: startBarcodeScanStream(),
),
),
);
}
Future<void> startBarcodeScanStream() async {
FlutterBarcodeScanner.getBarcodeStreamReceiver(
'#ff6666', 'Cancel', true, ScanMode.BARCODE)
.listen((barcode) {
// if (!mounted) return;
this.barcodeScanner = barcode;
print(barcode);
// Don't show form if barcode sacnner is cancelled
if (barcode == "-1") {
Navigator.pop(context);
}
});
return barcodeScanner;
}

我在我的扑动应用程序实现条码扫描器。一旦扫描完成我想给progressIndicator的中心扫描和我必须调用api。上面的代码没有显示任何进度指示器。

注意:我想在扫描后在扫描仪的中心显示progressIndicator，我必须调用api，一个响应成功，我必须隐藏那个进度指示器。

Answer 1

最简单的方法是在FutureBuilder中添加一个新条件，它将检测到您仍在等待扫描完成，并将显示加载直到扫描完成，然后它将显示正常的小部件

代码:

body: FutureBuilder(
builder: (ctx, snapshot) {
// This is new code: state NOT "done"
if (snapshotGames.connectionState != ConnectionState.done) {
return Center(child: CircularProgressIndicator());}
}
// The rest of your code is the same
if (snapshot.connectionState == ConnectionState.done) {

Answer 2

您应该添加bool变量来控制进度指示器，并添加Stack来将widget放在前面。

//Add variable
bool _loading=false;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children:[
Positioned(
child: FutureBuilder(
builder: (ctx, snapshot) {
// Checking if future is resolved or not
if (snapshot.connectionState == ConnectionState.done) {
// If we got an error
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error} occured',
style: TextStyle(fontSize: 18),
),
);
// if we got our data
} else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as String;
getGoodsData(data);
// return getGoodsData(data);
}
}
// Displaying LoadingSpinner to indicate waiting state
return Center(
child: CircularProgressIndicator(),
);
},
// Future that needs to be resolved
// inorder to display something on the Canvas
future: startBarcodeScanStream(),
),
),
),
if(_loading==true) //show progress indicator if loading is true
Positioned(
child: Center(
child: CircularProgressIndicator(), 
)
)
]
),
);
}
Future<void> startBarcodeScanStream() async {
setState(() {_loading=true;}); //start showing Circular Progress Indicator
FlutterBarcodeScanner.getBarcodeStreamReceiver(
'#ff6666', 'Cancel', true, ScanMode.BARCODE)
.listen((barcode) {
// if (!mounted) return;
this.barcodeScanner = barcode;
print(barcode);
// Don't show form if barcode sacnner is cancelled
if (barcode == "-1") {
Navigator.pop(context);
}
});
return barcodeScanner;
}