How do I create a button for a QR code to open a link?

Question

Is it possible to add a button that opens the scanned link or make the text as a link to click?

My source code:

import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/services.dart';

class QrScan extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return QrScanState();
  }
}

class QrScanState extends State<QrScan> {
  String _barcode = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('QR Scanner'),
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Image.asset(
                'assets/barcode.png',
                height: 150,
              ),
              SizedBox(
                height: 20,
              ),
               Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 80, vertical: 10.0),
                      child: RaisedButton(
                        color: Colors.lightBlue[700],
                        textColor: Colors.black,
                        splashColor: Colors.blueGrey,
                        onPressed: scan,
                        child: const Text('Scansiona il codice QR.'),
                      ),
                    ),
                  Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                      child: Text(
                        _barcode,
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.red),
                      ),
                    ),
            ],
          ),
        ));
  }

  Future scan() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this._barcode = barcode);
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this._barcode = 'Scusami, mi dai il permesso di usare la fotocamera?';
        });
      } else {
        setState(() => this._barcode = 'Errore sconosciuto $e');
      }
    } on FormatException {
      setState(() => this._barcode =
          'null, hai premuto il pulsante per tornare indietro prima di scansionare qualcosa');
    } catch (e) {
      setState(() => this._barcode = 'Errore sconosciuto : $e');
    }
  }

}

Answer 1

You can use package flutter_linkify https://pub.dev/packages/flutter_linkify

and url_launcher https://pub.dev/packages/url_launcher#-installing-tab-

I have made some changes in your code

import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

class QrScan extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return QrScanState();
  }
}

class QrScanState extends State<QrScan> {
  String _barcode = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Scanner'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Image.asset(
              'assets/barcode.png',
              height: 150,
            ),
            SizedBox(
              height: 20,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 80, vertical: 10.0),
              child: RaisedButton(
                color: Colors.lightBlue[700],
                textColor: Colors.black,
                splashColor: Colors.blueGrey,
                onPressed: scan,
                child: const Text('Scansiona il codice QR.'),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              child: Linkify(
                onOpen: (link) async {
                  if (await canLaunch(link.url)) {
                    await launch(link.url);
                  } else {
                    throw 'Could not launch $link';
                  }
                },
                text: _barcode,
                style: TextStyle(color: Colors.yellow),
                linkStyle: TextStyle(color: Colors.blue),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future scan() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this._barcode = barcode);
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this._barcode = 'Scusami, mi dai il permesso di usare la fotocamera?';
        });
      } else {
        setState(() => this._barcode = 'Errore sconosciuto $e');
      }
    } on FormatException {
      setState(() => this._barcode =
          'null, hai premuto il pulsante per tornare indietro prima di scansionare     qualcosa');
    } catch (e) {
      setState(() => this._barcode = 'Errore sconosciuto : $e');
    }
  }
}