Flutter: convert photo to BASE64 string before sending.

https://www.base64encode.org/

ในการส่งข้อมูลพวกรูปภาพในโทรศัพท์ วิธีหนึ่งที่เป็นที่นิยมคือ การแปลงให้เป็น base64 ก่อนและค่อยส่งนะคับ แต่ What is BASE64?

BASE64 คือ วิธีการเข้ารหัสรูปแบบหนึ่ง ที่จะเปลี่ยนข้อมูลต้นฉบับให้เป็นข้อความชุดใหม่ที่ไม่สามารถอ่านได้ ซึ่งการเข้ารหัสแบบนี้จะแทนที่ด้วยข้อมูลด้วยอักษร 64 ตัว

https://en.wikipedia.org/wiki/Base64

ซึ่งวิธีการ Endoce และ Decode นั้น แนะนำให้ใช้งานเว็บนี้ได้เลยนะคับ

ใน Article เราจะมาทดสอบเขียน code เพื่อ handle รูปใน Flutter กันนะคับ

1. เริ่มแรกให้เราไปสร้าง project flutter ขึ้นมาก่อน และทดสอบ run ดูนะคับ

flutter create base64_test
flutter run

2. จากนั้นให้ import service และ convert เข้ามานะคับ เพื่อช่วยในการแปลง base64 (ไม่ต้องลง plugin อะไรเพิ่มนะคับ สามารถ import เข้ามาได้เลย)

import 'package:flutter/services.dart'; // สำหรับloadรูปภาพ rootBundle
import 'dart:convert' as convert;  // สำหรับแปลงเป็น base64

3. ให้นำภาพที่เราจะใช้ใส่เข้าไปนะ Flutter นะคับ พร้อมทั้งจัดการ allow ใน pubspec.yaml ด้วย แบบนี้

4. สร้าง String base64 สำหรับรับค่าที่ได้หลังจาก convert เสร็จและ แปลง floatingActionButtion ให้มีการโหลดรุปภาพเข้ามานะคับ แบบนี้

String base64; // ประกาศด้านบนเลย

base64Encode() รับค่าเป็น List<int> ที่เป็น bytes และ return ออกมาเป็น String นะคับ

5. จากนั้นให้กำหนดเงื่อนไขของการโชว์

ถ้าตัวแปร base64 มีค่าก้อให้โชว์เลย แต่ถ้าไม่มีก้อแสดง Container() เปล่าๆ

6. code ทั้งหมดจะมีหน้าตาแบบนี้นะคับ

เมื่อกดที่ BASE64 button จะทำการโหลดรุปมาแปลงเป็น base64 String แบบรูปด้านขวานะคับ

แล้วพบกันใหม่คับ !