I'm trying to create a function about adding contact by qr code. Currently I'm able to generate the qr and the camera to scan the qr code. I wanted when user scanned others QR, it will show a dialog containing the scanned user information. I was able to create the function but because the function need some duration to fetch the data from database. From the start I got an error showing 'Null' is not type of 'String'.

I know the cause of it is because the data is still null (fetching information process) but my widget still want to build.

How can I fix these ?

Here's my code:

  void getQRData() async {
    await UserDatabase.getContactData(
      contactId: barcode!.code.toString(),
      data: data,
    );

    data = await UserDatabase.getUserShortData(
      userId: barcode!.code.toString(),
      phoneNumber: data['mobile_no'],
    );

    print(data);
  }

Widget build(BuildContext context){
  /// SOME OTHER CODE
    if (barcode != null)
      Dialog(
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(12.0)), //this right here
        child: Container(
          height: 160,
          padding: EdgeInsets.only(top: 10, right: 10, left: 10),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ///Scanned QR Person Picture
              BuildProfilePicture(
                radius: 20,
                nickname: data['nickname'],
                profileLink: '',
              ),

              ///Scanned QR Person Nickname
              Text(
                data['nickname'],
                style: primaryColor600Style.copyWith(fontSize: 18),
                textAlign: TextAlign.center,
              ),

              ///Dialog add Label
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 13),
                child: Text(
                  'Add this person to your contact list',
                  textAlign: TextAlign.center,
                  style: primaryColor400Style.copyWith(
                    fontSize: 12,
                    color: Colors.black,
                  ),
                ),
              ),

              ///Button add to contact
              Flexible(
                child: GestureDetector(
                  onTap: () {
                    controller?.resumeCamera();
                  },
                  child: Container(
                    height: 30,
                    decoration: BoxDecoration(
                      color: accentColor,
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Center(
                      child: Text(
                        'Add to contact',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
}

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;

    controller.scannedDataStream.listen((scanData) {
      setState(() {
        barcode = scanData;
        if (barcode != null) {
          controller.pauseCamera();

          getQRData();
        }
      });
    });
  }
}

CodePudding user response：

Hey use FutureBuilder and show CircleProgressIndicator until you fetch data from database.

For your reference - FutureBuilder

CodePudding user response：

You can wrap your widget in a Visibility widget to make it hide until the api call is complete. The api result can change its field to visible when it's done. In order to make it not give an error, just pass your widget some fake valid data until the api returns with valid data.