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

บทความใหม่ ยังไม่ถึงปี โดย Ninenik Narkdee
flutter qr flutter

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flutter qr_flutter

ดูแล้ว 647 ครั้ง


เนื้อหาตอนต่อไปนี้ เราจะมาเพิ่มความรู้เล็กน้อยเกี่ยวกับการใช้งาน
plugin ที่ชื่อว่า qr_flutter จะขอต่อยอดจากโค้ดจากตอนที่แล้ว
ไฟล์ตัวอย่างมีให้โหลดท้ายบทความ  โดยตัว qr_flutter เป็นตัวที่
ให้เราสามารถสร้าง qr code เพื่อใช้งานในแอป flutter ได้อย่างง่าย
ดังนั้นเพื่อต่อยอดจากตอนที่แล้วที่เราพูดถึงเรื่องการแชร์ไฟล์ เราจะก็นำมา
ร่วมใช้งานหรือประยุกต์กับเนื้อหานี้ด้วย เช่น เมื่อเราสร้างรหัส qrcode แล้ว
เราสามารถแชร์ไฟล์ไปให้คนอื่นหรือไปยังแอปอื่นๆ ได้ หรือแม้แต่เราสามารถ
จะบันทึกเก็บไว้ในแอปของเรา ไว้ใช้งานก็ได้
 
ทบทวนตอนที่แล้วได้ที่
การแชร์ไฟล์ Sharing files ด้วย Share Plus ใน Flutter http://niik.in/1119
 

ติดตั้ง package ที่จำเป็นเพิ่มเติม ตามรายการด้านล่าง

    แพ็กเก็จที่จำเป็นต้องติดตั้งเพิ่มเติม สำหรับการทำงานมีดังนี้
 
  qr_flutter: ^4.1.0
 
 

สร้างคิวอาร์โค้ดด้วย qr flutter

    หลังจากที่เราติดตั้งตัว plugin พร้อมใช้งานแล้ว ต่อไปเราก็จะมาดูว่า ในการใช้งาน qr_flutter นั้น
เราจะต้องจัดการหรือทำอะไรบ้าง หรือมีวิธีการใช้งานอย่างไร แต่ในที่นี้เราจะไม่พูดถึงว่า qrcode คืออะไร
เป็นแบบไหน เรามีบทความเกี่ยวกับรายละเอียด qrcode อยู่แล้ว สามารถค้นหาที่ช้องค้นหาด้านบนได้
    สำหรับการสร้างรหัส qrcode นั้นหลักๆ ก็เป็นการจัดการกับข้อความหรือ String หรือก็คือการนำ
ข้อความในรูปแบบต่างๆ มาสร้างเป็นภาพรหัส qrcode ที่เราสามารถใช้เครื่องการสแกน qrcode มา
สแกนอ่านค่าเพื่อใช้ค่าหรือข้อมูลนั้นๆ ไปใช้งานได้
    ตัวอย่างไฟล์การใช้งาน qrtools.dart คำอธิบายแสดงในโค้ด
 

ไฟล์ qrtools.dart

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
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('แชร์รูปคิวอาร์โค้ด'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
 

ผลลัพธ์ที่ได้



 
 
จะเห็นว่าเมื่อเราเปิดมาครั้งแรก ก็จะแสดง qrcode ของข้อความค่าเริ่มต้น ในตัวอย่างคือ url ของ
เว็บไซต์ www.ninenik.com โดยเราสามารถลบและแก้ไขเป็นข้อความตามต้องการได้ ในทันที
ที่ทำการแก้ไขข้อความ ก็จะมีการสร้าง qrcode เป็นค่าใหม่ สังเกตว่า มีการใช้งาน widget ที่ชื่อว่า
RepaintBoundary ครอบส่วนของการแสดง qrcdoe ไว้ โดยจะมีส่วนทำให้ Flutter รู้ว่าควรทำ
การเรนเดอร์เฉพาะส่วนที่มีการเปลี่ยนแปลง แทนที่จะเรนเดอร์ทั้งหมด นอกจากนี้ยังใช้สำหรับจับภาพ
หน้าจอหรือบันทึกภาพจากวิดเจ็ต เช่น การจับภาพ QR Code ไปเป็นไฟล์รูป โดยใช้ร่วมกับ 
RenderRepaintBoundary และการแปลงวิดเจ็ตเป็นรูปภาพ (toImage()) 
    ในตัวอย่างปกติแล้วรูป png จะเป็นรูปพื้นหลังโปร่ง โดนสีขาวจะเป็นสีโปร่ง แต่ถ้าเรานำเอารูปนี้
ไปสร้างในพื้นหลังสีดำ ก็อาจจะทำให้ไม่เห็นส่วนของ qrcode สีดำได้ ในที่นี้เราเลยใส่พื้นหลังสีขาว
เข้าไปในส่วนของ qrcode ซึ่งจะคงไว้หรือเอาออกก็ได้หากไม่ได้ต้องการ
    เมื่อเราได้รูป qrcode ที่ต้องการแล้ว เราสามารถทำการกดบันทึกเป็นไฟล์รูปไว้ที่โฟลเดอร์แอป
ในตัวอย่างก็คือใน app_flutter หรือเราจะกดปุ่มแชร์ แล้วส่งไฟล์ไปใช้นอกแอป หรือส่งไปยังแอปอื่น
หรือให้คนอื่นได้ 
    ตัวอย่างโค้ดด้านบนเราสามารถนำไปปรับประยุกต์ได้ตามต้องการ 
   
 

การประยุกต์ให้รองรับข้อมูล Qrcode รูปแบบต่างๆ

    ข้อมูล qrcode สามารถกำหนดเป็นข้อความรูปแบบต่างๆ ได้ดังนี้
 
1. ข้อความทั่วไป (Text)
รูปแบบ: ข้อความธรรมดา เช่น
Hello World!
2. URL (ลิ้งค์เว็บไซต์)
รูปแบบ: ต้องขึ้นต้นด้วย http:// หรือ https://
https://www.ninenik.com
 
3. เบอร์โทรศัพท์ (Phone Number)
รูปแบบ: ขึ้นต้นด้วย tel:
tel:0812345678
 
4. ส่ง SMS (SMS)
รูปแบบ: ขึ้นต้นด้วย sms:, สามารถใส่เนื้อหาข้อความต่อท้ายด้วย ?body=
sms:0812345678?body=Hello, this is a test message
 
5. ส่งอีเมล (Email)
รูปแบบ: ขึ้นต้นด้วย mailto:, สามารถใส่หัวเรื่องและเนื้อหาอีเมลด้วยการใช้ ?subject= 
และ &body=
mailto:example@example.com?subject=Hello&body=This is a test email.
 
6. ตำแหน่งที่ตั้ง (Geo Location)
รูปแบบ: ใช้พิกัดละติจูดและลองจิจูด ขึ้นต้นด้วย geo:
geo:13.7563,100.5018
 
7. ข้อมูลการเชื่อมต่อ Wi-Fi (Wi-Fi Configuration)
รูปแบบ: ระบุ SSID, ประเภทการเข้ารหัส และรหัสผ่าน โดยใช้ WIFI:
WIFI:S:MyNetwork;T:WPA;P:mypassword;;
 
8. นามบัตร (vCard)
รูปแบบ: ข้อมูลบุคคลตามมาตรฐาน vCard
BEGIN:VCARD
VERSION:3.0
N:Lastname;Firstname
ORG:Company Name
TEL:0812345678
EMAIL:example@example.com
END:VCARD
 
9. เหตุการณ์ในปฏิทิน (Calendar Event)
รูปแบบ: ข้อมูลของเหตุการณ์ตามมาตรฐาน iCalendar
BEGIN:VEVENT
SUMMARY:Meeting with John
DTSTART:20230930T140000Z
DTEND:20230930T150000Z
LOCATION:Office
DESCRIPTION:Discuss project details
END:VEVENT
 
10. โซเชียลมีเดีย (Social Media Links)
รูปแบบ: URL ของโซเชียลมีเดีย เช่น Facebook, Twitter, Instagram, Tiktok, Line
https://www.facebook.com/ninenik.page
 
    เราจะปรับไฟล์ qrtools.dart ให้รองรับการเลือกตัวอย่างข้อมูลตามรูปแบบที่ต้องการ แล้วผู้ใช้
สามารถแก้ไขข้อความเป็นข้อความหรือข้อมูลที่ต้องการได้
 

ไฟล์ qrtools.dart

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
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']!),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
 

ผลลัพธ์ที่ได้

 

 
โค้ดนี้ปรับแต่งเพียงเล็กน้อย คือเพิ่มแค่ส่วนตัวอย่างรูปแบบข้อมูลต่างๆ เป็นปุ่มให้เรากดเลือก เมื่อเลือก
แล้วก็นำข้อมุลตัวอย่างไปแทนค่าข้อความที่จะสร้างเป็น qrcode
 
    สำหรับเนื้อหาเกี่ยวกับการใช้งาน qr_flutter ก็จะมีประมาณเท่านี้ ค่อนข้างครอบคลุม ก็สามารถนำ
ไปปรับประยุกต์ตามต้องการ และแน่นอนว่าบทความตอนหน้า เมื่อเราพูดถึง qrcode แล้ว เราก็ต้องมี
เครื่องมือที่จะทำการอ่านค่า qrcode นั้นๆ รอติดตาม


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 30-09-2024


ดาวน์โหลดโค้ดตัวอย่าง สามารถนำไปประยุกต์ หรือ run ทดสอบได้

http://niik.in/download/flutter/demo_049_01102024_source.rar


qr_flutter
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง



Tags:: qr flutter flutter




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ