如何在掃描條碼時顯示進度指示器

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 以將小部件放在前面。

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