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

Question

I'm trying to create a scanner that can insert string from a QR code. I've been researching to no avail.

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 is 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.';
    }
  }

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.

Answer 1

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']);