Как отобразить индикатор выполнения при сканировании штрих-кода

#flutter #dart

Вопрос:

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

Я внедряю сканер штрих-кодов в свое приложение flutter. После завершения сканирования я хочу показать индикатор прогресса в центре сканирования, и я должен вызвать api.Приведенный выше код не показывает никакого индикатора прогресса. Пожалуйста, помогите мне достичь этого.

Примечание: Я хочу показать индикатор прогресса в центре сканера после сканирования, и я должен вызвать api, если ответ будет получен успешно, я должен скрыть этот индикатор прогресса.

Ответ №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) {
 

Комментарии:

1. я пробовал с вашим кодом, он не показывает индикатор прогресса для меня

2. видно только сканирование