Home > front end >  How to split string from a QR Code and inserting them into a login and password text form field
How to split string from a QR Code and inserting them into a login and password text form field

Time:04-23

currently I'm trying to create a scanner that can insert string from a qr code. I've been googling and to no avail and are at my wit's end.

I managed to create a simple scanner that can setstate for the username text form field but not sure how to split the string from the qr code to do the same for the password text form field.

Below are my current code.

For the form

               ListTile(
                    title: TextFormField(
                      decoration: InputDecoration(labelText: 'Username'),
                      validator: (val) =>
                          val.length < 1 ? 'Username Required' : null,
                      onSaved: (val) => _username = val,
                      obscureText: false,
                      keyboardType: TextInputType.text,
                      controller: _controllerUsername, //controller
                    ),
                  ),
                  ListTile(
                    title: TextFormField(
                      decoration: InputDecoration(labelText: 'Password'),
                      validator: (val) =>
                          val.length < 1 ? 'Password Required' : null,
                      onSaved: (val) => _password = val,
                      obscureText: true,
                      controller: _controllerPassword,
                      keyboardType: TextInputType.text,
                      autocorrect: false,
                    ),
                  ),

And this is the scanner

            ListTile(
              title: NativeButton(
                  child: Text(
                    'Scan',
                    textScaleFactor: textScaleFactor,
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.blue,
                  disabledColor: Colors.grey,
                  onPressed: () {
                    scan().then((string) => setState(() {
                          _controllerUsername.text = _username;
                          _controllerPassword.text = _password;
                        }));
                  }),
            )


 Future<void> scan() async {
    try {
      String _username = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666', //bg color
        'Cancel',
        true,
        ScanMode.QR,
      );

      if (!mounted) return;

      setState(() {
        this._username = _username.isEmpty
            ? ''
            : _username == '-1'
                ? ''
                : _username;
      });
    } on PlatformException {
      _username = 'Failed to get platform version.';
    }
  }

Any help is greatly appreciated. Thanks in advance.

Edit: I used an online QR Code generator and write text such as name~password and the result shows up the same in username text form field.

CodePudding user response:

If you generate the QR code then this is the simple and best way to achieve your requirement

 import 'dart:convert';

 Map<String, dynamic> user = {
                              'name': "Test",
                              'password': "password",
                              'email': "[email protected]",
 };
 
String userDate = json.encode(user);

Use userDate to generate QR code

After scan convert QR into Map

var userInfo = json.decode(userDate);

get required field like this

print(userInfo['name']);
  • Related