Quét mã QR Code và Barcode trong Flutter

Tiếp theo phần hướng dẫn xây dựng ứng dụng Flutter thì Team Việt Dev sẽ trình bày quét mã QR Code và Barcode trong Flutter (QR Code & Barcode Scanner).

Trong nội dung phần hướng dẫn chúng ta sẽ xây dựng ứng dụng Flutter với các tính năng quét mã QR Code và Barcode (QR Code & Barcode Scanner) bằng camera.

Flutter là một SDK mã nguồn mở do Google phát triển, được sử dụng để tạo ra các ứng dụng dành cho thiết bị di động trên nền tảng iOS và Android. Flutter được viết bằng ngôn ngữ Dart.

Bước 1: Đầu tiên bạn mở tập tin pubspec.yaml và thêm đoạn mã sau vào:

dependencies:   
  ....
  barcode_scan: ^0.0.4
  qr_flutter: ^1.1.5

Bước 2: Bây giờ chúng ta sẽ thiết kế giao diện người dùng trên màn hình chính của ứng dụng cho phép người dùng chọn quét mã QR Code và Barcode bằng cách nhấn vào nút Scan. Bạn cần thay thế nội dung của tập tin lib/main.dart bằng đoạn mã sau đây:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QR Code & Barcode Scanner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'QR Code & Barcode Scanner'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String result = "Please scan the QR code or Barcode";

  Future _scanQR() async {
    try {
      String qrResult = await BarcodeScanner.scan();
      setState(() {
        result = qrResult;
      });
    } on PlatformException catch (ex) {
      if (ex.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          result = "Camera permission was denied";
        });
      } else {
        setState(() {
          result = "Unknown Error $ex";
        });
      }
    } on FormatException {
      setState(() {
        result = "You pressed the back button before scanning anything";
      });
    } catch (ex) {
      setState(() {
        result = "Unknown Error $ex";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("QR Code & Barcode Scanner"),
      ),
      body: Center(
        child: Text(
          result,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        icon: Icon(Icons.camera_alt),
        label: Text("Scan"),
        onPressed: _scanQR,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

Bước 3: Hãy bắt đầu khởi chạy ứng dụng bằng cách nhấp vào mũi tên màu xanh lá cây trong IDE. Bạn sẽ thấy đầu ra Android hoặc iOS tùy thuộc vào thiết bị của bạn.

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về xây dựng ứng dụng di động trên Android và iOS bằng Flutter miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)