สร้างคิวอาร์โค้ดในแอป Flutter ด้วย qr flutter อย่างง่าย

  qr_flutter: ^4.1.0

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:share_plus/share_plus.dart';
import 'package:intl/intl.dart';

class Qrtools extends StatefulWidget {
  static const routeName = '/qrtools';

  const Qrtools({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _QrtoolsState();
  }
}

class _QrtoolsState extends State<Qrtools> {
  // กำหนดตัวควบคุมข้อความ
  final TextEditingController _controller = TextEditingController();
  final GlobalKey _qrKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    // กำหนดค่าเริ่มต้นให้กับ ข้อความ ที่ใช้สร้าง qrcode ตามต้องการ
    // เมื่อแสดงครั้งแรก ยังไม่ได้กำหนดค่าผ่านการพิมพ์เข้าไป
    if (_controller.text == "") {
      _controller.value =
          const TextEditingValue(text: 'https://www.ninenik.com');
    }
  }

  // ฟังก์ชันสำหรับแชร์ QR Code
  void _shareQrCode() async {
    try {
      // ดึงเวลาปัจจุบัน
      DateTime now = DateTime.now();
      // จัดรูปแบบวันที่และเวลา
      String formattedDate = DateFormat("dd-MM-yyyy'T'HHmmss").format(now);
      // สร้างชื่อไฟล์
      String fileName = 'qrcode_$formattedDate.png';

      // ส่วนจัดการพื้นที่ที่ใช้วาดรูป qrcode ที่ใช้งานผ่าน RepaintBoundary widget
      // ดึง boundary ของวิดเจ็ต QR Code
      final boundary =
          _qrKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
      // ถ้ามีข้อมูลจาก qrcode
      if (boundary != null) {
        // สร้างข้อมูลรูปจากส่วนที่แสดง qrcode จากนั้นแปลงเป็นไฟล์ข้อมูล
        final image = await boundary.toImage(pixelRatio: 3.0);
        final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        final pngBytes = byteData?.buffer.asUint8List();

        // นำข้อมูลนี้ไปสร้างเป็น dynamic ไฟล์ ผ่านการใช้งาน XFile
        // แล้ทำการแชร์ข้อมูลตามรูปแบบที่กำหนด
        if (pngBytes != null) {
          await Share.shareXFiles(
            [
              XFile.fromData(
                pngBytes,
                mimeType: 'image/png',
              ),
            ],
            text: 'นี่คือ QR Code ของคุณ',
            fileNameOverrides: [fileName],
          );
        }
      }
    } catch (e) {
      print('Error sharing QR Code: $e');
    }
  }

  // ฟังก์ชันสำหรับบันทึก QR Code ลงในไฟล์
  Future<void> _saveQrCode() async {
    try {
      // ดึงเวลาปัจจุบัน
      DateTime now = DateTime.now();
      // จัดรูปแบบวันที่และเวลา
      String formattedDate = DateFormat("dd-MM-yyyy'T'HHmmss").format(now);
      // สร้างชื่อไฟล์
      String fileName = 'qrcode_$formattedDate.png';
      // ดึง boundary ของวิดเจ็ต QR Code
      RenderRepaintBoundary boundary =
          _qrKey.currentContext!.findRenderObject() as RenderRepaintBoundary;

      // แปลงเป็น image
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);

      // แปลงเป็น byte data
      ByteData? byteData =
          await image.toByteData(format: ui.ImageByteFormat.png);

      if (byteData != null) {
        // แปลงเป็น Uint8List
        Uint8List pngBytes = byteData.buffer.asUint8List();

        // หาที่เก็บไฟล์ใน app_flutter folder
        final directory = await getApplicationDocumentsDirectory();
        final filePath = '${directory.path}/$fileName';

        // เขียนไฟล์
        final file = File(filePath);
        await file.writeAsBytes(pngBytes);

        // แสดงข้อความเมื่อบันทึกสำเร็จ
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('บันทึก QR Code สำเร็จ: $filePath')),
        );
      }
    } catch (e) {
      print('Error saving QR Code: $e');
    }
  }

  // ฟังก์ชั่นสร้างและแสดงผล QR Code
  Widget _buildQrGenerate(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        QrImageView(
          data: _controller.text, //  กำหนดข้อความหรือ URL ที่จะแสดงเป็น QR Code
          // กำหนดให้เวอร์ชันของ QR Code ถูกเลือกโดยอัตโนมัติตามความซับซ้อนของข้อมูล
          version: QrVersions.auto,
          size: 250.0, // กำหนดขนาดของ QR Code
          gapless: false, // กำหนดให้ QR Code ไม่เว้นช่องว่างระหว่างบล็อก
          // เพิ่มส่วนนี้เพื่อกำหนดพื้นหลังสีขาว
          backgroundColor: Colors.white,
        ),
      ],
    );
  }

  // ฟังก์ชันล้างข้อมูลเมื่อ widget ถูกทำลาย
  @override
  void dispose() {
    _controller.dispose(); // ล้าง TextEditingController
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('สร้างคิวอาร์โค้ด'),
        actions: [
          IconButton(
            icon: Icon(Icons.download),
            onPressed: _saveQrCode, // เมื่อกดปุ่มบันทึก QR Code
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RepaintBoundary(
                key: _qrKey,
                child: _buildQrGenerate(context),
              ),
              SizedBox(height: 20),
              Center(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                  ),
                  controller: _controller,
                  decoration: InputDecoration(
                    fillColor:
                        Color.fromARGB(255, 224, 239, 243), // Background color
                    filled: true,
                    hintText: 'กรอกข้อความหรือ URL ที่ต้องการ',
                    hintStyle: const TextStyle(color: Colors.grey),
                    enabledBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.blue,
                        width: 2.0,
                      ),
                    ),
                    suffixIcon: _controller.text.isNotEmpty
                        ? IconButton(
                            icon: Icon(Icons.clear, color: Colors.grey),
                            onPressed: () {
                              setState(() {
                                _controller.clear();
                              });
                            },
                          )
                        : null,
                  ),
                  onChanged: (value) {
                    setState(() {});
                  },
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton.icon(
                onPressed: _shareQrCode,
                icon: Icon(Icons.share),
                label: Text('แชร์รูปคิวอาร์โค้ด'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Hello World!

https://www.ninenik.com

tel:0812345678

sms:0812345678?body=Hello, this is a test message

mailto:example@example.com?subject=Hello&body=This is a test email.

geo:13.7563,100.5018

WIFI:S:MyNetwork;T:WPA;P:mypassword;;

BEGIN:VCARD
VERSION:3.0
N:Lastname;Firstname
ORG:Company Name
TEL:0812345678
EMAIL:example@example.com
END:VCARD

BEGIN:VEVENT
SUMMARY:Meeting with John
DTSTART:20230930T140000Z
DTEND:20230930T150000Z
LOCATION:Office
DESCRIPTION:Discuss project details
END:VEVENT

https://www.facebook.com/ninenik.page

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:share_plus/share_plus.dart';
import 'package:intl/intl.dart';

class Qrtools extends StatefulWidget {
  static const routeName = '/qrtools';

  const Qrtools({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _QrtoolsState();
  }
}

class _QrtoolsState extends State<Qrtools> {
  // กำหนดตัวควบคุมข้อความ
  final TextEditingController _controller = TextEditingController();
  final GlobalKey _qrKey = GlobalKey();

  List<Map<String, String>> qrExamples = [
    {'label': 'ข้อความทั่วไป', 'example': 'Hello World!'},
    {'label': 'URL', 'example': 'https://www.ninenik.com'},
    {'label': 'เบอร์โทรศัพท์', 'example': 'tel:0812345678'},
    {
      'label': 'ส่ง SMS',
      'example': 'sms:0812345678?body=Hello, this is a test message'
    },
    {
      'label': 'ส่งอีเมล',
      'example':
          'mailto:example@example.com?subject=Hello&body=This is a test email.'
    },
    {'label': 'ตำแหน่งที่ตั้ง', 'example': 'geo:13.7563,100.5018'},
    {'label': 'Wi-Fi', 'example': 'WIFI:S:MyNetwork;T:WPA;P:mypassword;;'},
    {
      'label': 'นามบัตร',
      'example': '''BEGIN:VCARD
VERSION:3.0
N:Lastname;Firstname
ORG:Company Name
TEL:0812345678
EMAIL:example@example.com
END:VCARD'''
    },
    {
      'label': 'เหตุการณ์ปฏิทิน',
      'example': '''BEGIN:VEVENT
SUMMARY:Meeting with John
DTSTART:20230930T140000Z
DTEND:20230930T150000Z
LOCATION:Office
DESCRIPTION:Discuss project details
END:VEVENT'''
    },
    {
      'label': 'โซเชียลมีเดีย',
      'example': 'https://www.facebook.com/ninenik.page'
    },
  ];

  @override
  void initState() {
    super.initState();
    // กำหนดค่าเริ่มต้นให้กับ ข้อความ ที่ใช้สร้าง qrcode ตามต้องการ
    // เมื่อแสดงครั้งแรก ยังไม่ได้กำหนดค่าผ่านการพิมพ์เข้าไป
    if (_controller.text == "") {
      _controller.value =
          const TextEditingValue(text: 'https://www.ninenik.com');
    }
  }

  // ฟังก์ชันสำหรับแชร์ QR Code
  void _shareQrCode() async {
    try {
      // ดึงเวลาปัจจุบัน
      DateTime now = DateTime.now();
      // จัดรูปแบบวันที่และเวลา
      String formattedDate = DateFormat("dd-MM-yyyy'T'HHmmss").format(now);
      // สร้างชื่อไฟล์
      String fileName = 'qrcode_$formattedDate.png';

      // ส่วนจัดการพื้นที่ที่ใช้วาดรูป qrcode ที่ใช้งานผ่าน RepaintBoundary widget
      // ดึง boundary ของวิดเจ็ต QR Code
      final boundary =
          _qrKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
      // ถ้ามีข้อมูลจาก qrcode
      if (boundary != null) {
        // สร้างข้อมูลรูปจากส่วนที่แสดง qrcode จากนั้นแปลงเป็นไฟล์ข้อมูล
        final image = await boundary.toImage(pixelRatio: 3.0);
        final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        final pngBytes = byteData?.buffer.asUint8List();

        // นำข้อมูลนี้ไปสร้างเป็น dynamic ไฟล์ ผ่านการใช้งาน XFile
        // แล้ทำการแชร์ข้อมูลตามรูปแบบที่กำหนด
        if (pngBytes != null) {
          await Share.shareXFiles(
            [
              XFile.fromData(
                pngBytes,
                mimeType: 'image/png',
              ),
            ],
            text: 'นี่คือ QR Code ของคุณ',
            fileNameOverrides: [fileName],
          );
        }
      }
    } catch (e) {
      print('Error sharing QR Code: $e');
    }
  }

  // ฟังก์ชันสำหรับบันทึก QR Code ลงในไฟล์
  Future<void> _saveQrCode() async {
    try {
      // ดึงเวลาปัจจุบัน
      DateTime now = DateTime.now();
      // จัดรูปแบบวันที่และเวลา
      String formattedDate = DateFormat("dd-MM-yyyy'T'HHmmss").format(now);
      // สร้างชื่อไฟล์
      String fileName = 'qrcode_$formattedDate.png';
      // ดึง boundary ของวิดเจ็ต QR Code
      RenderRepaintBoundary boundary =
          _qrKey.currentContext!.findRenderObject() as RenderRepaintBoundary;

      // แปลงเป็น image
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);

      // แปลงเป็น byte data
      ByteData? byteData =
          await image.toByteData(format: ui.ImageByteFormat.png);

      if (byteData != null) {
        // แปลงเป็น Uint8List
        Uint8List pngBytes = byteData.buffer.asUint8List();

        // หาที่เก็บไฟล์ใน app_flutter folder
        final directory = await getApplicationDocumentsDirectory();
        final filePath = '${directory.path}/$fileName';

        // เขียนไฟล์
        final file = File(filePath);
        await file.writeAsBytes(pngBytes);

        // แสดงข้อความเมื่อบันทึกสำเร็จ
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('บันทึก QR Code สำเร็จ: $filePath')),
        );
      }
    } catch (e) {
      print('Error saving QR Code: $e');
    }
  }

  // ฟังก์ชั่นสร้างและแสดงผล QR Code
  Widget _buildQrGenerate(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus(); // Unfocus เมื่อกดรูป
          },
          child: QrImageView(
            data:
                _controller.text, //  กำหนดข้อความหรือ URL ที่จะแสดงเป็น QR Code
            // กำหนดให้เวอร์ชันของ QR Code ถูกเลือกโดยอัตโนมัติตามความซับซ้อนของข้อมูล
            version: QrVersions.auto,
            size: 250.0, // กำหนดขนาดของ QR Code
            gapless: false, // กำหนดให้ QR Code ไม่เว้นช่องว่างระหว่างบล็อก
            // เพิ่มส่วนนี้เพื่อกำหนดพื้นหลังสีขาว
            backgroundColor: Colors.white,
          ),
        ),
      ],
    );
  }

  // ฟังก์ชันล้างข้อมูลเมื่อ widget ถูกทำลาย
  @override
  void dispose() {
    _controller.dispose(); // ล้าง TextEditingController
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('สร้างคิวอาร์โค้ด'),
        actions: [
          IconButton(
            icon: Icon(Icons.download),
            onPressed: _saveQrCode, // เมื่อกดปุ่มบันทึก QR Code
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RepaintBoundary(
                key: _qrKey,
                child: _buildQrGenerate(context),
              ),
              SizedBox(height: 20),
              Center(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                  ),
                  controller: _controller,
                  decoration: InputDecoration(
                    fillColor:
                        Color.fromARGB(255, 224, 239, 243), // Background color
                    filled: true,
                    hintText: 'กรอกข้อความหรือ URL ที่ต้องการ',
                    hintStyle: const TextStyle(color: Colors.grey),
                    enabledBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.blue,
                        width: 2.0,
                      ),
                    ),
                    suffixIcon: _controller.text.isNotEmpty
                        ? IconButton(
                            icon: Icon(Icons.clear, color: Colors.grey),
                            onPressed: () {
                              setState(() {
                                _controller.clear();
                              });
                            },
                          )
                        : null,
                  ),
                  maxLines: null, // ทำให้ TextField ขยายได้ไม่จำกัด
                  minLines: 1, // จำนวนแถวขั้นต่ำ
                  onChanged: (value) {
                    setState(() {});
                  },
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton.icon(
                onPressed: _shareQrCode,
                icon: Icon(Icons.share),
                label: Text('แชร์รูปคิวอาร์โค้ด'),
              ),
              SizedBox(height: 20),
              // GridView สำหรับปุ่มตัวอย่าง
              GridView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: qrExamples.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, // 2 คอลัมน์
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 3,
                ),
                itemBuilder: (context, index) {
                  return ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _controller.text = qrExamples[index]['example']!;
                      });
                    },
                    child: Text(qrExamples[index]['label']!),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}