Flutter: Open the text as a link

Question

I'm learning how to use dart.I created a simple application that scans the qrCodes, and displays the text. My question is: How do I open the text as a link? Since the url is displayed to me as text.

Currently the application works without errors, but I would like to create a tap to open the links in the browser. This is my main.dart

 void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _MyAppState();
  }

  class _MyAppState extends State<MyApp> {
  GlobalKey qrKey =GlobalKey();
  var qrText = "";
  QRViewController controller;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(body: Column(children: [

      Expanded(
      flex:5,
      child: QRView(key: qrKey,
      overlay: QrScannerOverlayShape(
        borderRadius:10,
        borderColor: Colors.red,
        borderLength: 30,
        borderWidth: 10,
        cutOutSize:300

      ),
      onQRViewCreated: _onQRViewCreate,)
          ),
    Expanded(
    flex: 1,
    child: Center(
    child: Text('Scan result: $qrText'),



     ),
    )
       ],
      ),
    );
  }

  @override
    void dispose() {
    controller?.dispose();
    super.dispose();
  }



  void _onQRViewCreate(QRViewController controller ) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData;
      });
    });
  }

}

Default browser. But later I will try to implement it in the webview. — KernelPaniC, Dec 03 '20 at 16:53

score 0 · Accepted Answer · answered Dec 03 '20 at 16:59

use url_launcher to open the link

eg code

class _MyAppState extends State<MyApp> {
  GlobalKey qrKey = GlobalKey();
  var qrText = "";
  QRViewController controller;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              flex: 5,
              child: QRView(
                key: qrKey,
                overlay: QrScannerOverlayShape(
                    borderRadius: 10,
                    borderColor: Colors.red,
                    borderLength: 30,
                    borderWidth: 10,
                    cutOutSize: 300),
                onQRViewCreated: _onQRViewCreate,
              )),
          Expanded(
            flex: 1,
            child: Center(
              child: InkWell(
                child: Text(
                  'Scan result: $qrText',
                ),
                onTap: () {
                  if (qrText.isNotEmpty) {
                    launch(qrText);
                  }
                },
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  void _onQRViewCreate(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData;
      });
    });
  }
}

There is a way to add a Vibration when qrText is captured? – KernelPaniC Dec 04 '20 at 17:09 — KernelPaniC, Dec 04 '20 at 17:09

score 0 · Answer 2 · answered Dec 03 '20 at 16:59

You should split the Text into two TextComponents within a row and add a GestureDetector to handle the tap on the link. Add blue styling and underline if you want it to look like a link.

Row(children:[Text('Scan result: '), GestureDetector(onPressed: () async { await launch(qrText); }, child:Text(qrText, style=...))])

"launch" is explained here: How do I open a web browser (URL) from my Flutter code?

score -1 · Answer 3 · answered Apr 16 '23 at 18:12

-1

import 'dart:html';
window.open('https://merchant.razorpay.com/policy/LazhrlAH8gPfi9/refund',"new tab");

answered Apr 16 '23 at 18:12

Anks

11
2

Flutter: Open the text as a link

3 Answers3