How to show progress indicator while scanning barcode - flutter

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;
}
I am implementing barcode scanner in my flutter application. Once scanning is done I want to show progressIndicator at the center of scanning and I have to call the api.The above code is not showing any progress indicator.
Note: I want to show progressIndicator at the center of scanner after scanning and I have to call the api one response comes successfully I have to hide that progress indicator.

Answer 1

Easiest way is to add a new condition in your FutureBuilder that will detect that you are still waiting for the scan to complete and will display a loading until scan is done, then it will display normal widgets
Code:
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

You should add a bool variable to control the progress indicator and a Stack to put widget in front.
//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;
}