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

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

您应该添加一个布尔变量来控制进度指示器和一个堆栈以将小部件放在前面。

//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;
  }