Copyright 2024 - Custom text here

โจทย์เป็นอย่างนี่นะครับ เรามี URL ที่เก็บรูปใน Internet แบบนี่นะ

เข้าไปที่ URL นี่นะครับ http://androidthai.in.th/mua/lmage/food2.jpg และ เอามาแสดงใน Android หรือ iPhone แบบนี่ครับ

 

 และถ้าสามารถใส่ปุ่ม Back และ Next เข้าไป ต้อง เลื่อนภาพ ไปกลับดูได้แบบนี้

  

โดยรูปทุกๆ รูปอยู่ใน Internet ทั้งหมด มาเริ่มต้นกันครับ

 

 

เหมือนเดิม Workshop เริ่มจาก สร้างโปรเจ็คเปล่าๆ ของ Flutter ก่อน (ใครทำไม่ได้ไปดูที่นี่ครับ http://androidthai.in.th/android-flutter/105-step-1-create-state  )

    

สร้าง ไฟร์ dart เอาชื่อ urlImage ครับ

 

ในการโหลดรูป มาสเตอร์ จะใช้ Library Transparent_image ที่เป็น API ช่วยในการโหลดรูป ไปที่ https://pub.dartlang.org/packages/transparent_image 

เราจะ Add Library (ใครจำวิธีการ Import Library หรือ API ไม่ได้ ไปดูที่ http://androidthai.in.th/android-flutter/96-add-package-or-library-on-flutter )

 

ไปที่ไฟร์ pubspec.yaml และเพิ่ม โค้ด transparent_image: ^0.1.0 ครับ

 กลับมาที่ urlImage.dart ให้เรา import Library transparent_image เข้าไปครับ

API อีกอันครับ cached_network_image ที่เราต้องใช้ครับ ไปโหลดที่นี่ครับ https://pub.dartlang.org/packages/cached_network_image 

เหมือนเดิม ไป Add Library

import Library cached_network_image มาได้เลยครับ

 เพิ่ม สองคลาสนี่เข้าไป ในส่วนของ body ของ คลาส _UrlImageState ทำเป็น Object Container เปล่าๆ ก่อน

 

กลับไปที่ main.dart

จะใช้คลาส ใน urlImage.dart ต้อง Import เข้ามาก่อน

จาก ของเก่าที่แสดงตัวอักษรว่า body ให้ เอา Object ของคลาส UrlImage มาแทน

ทดสอบโค้ด จะเห็นที่ appBar แสดงตัวอักษร Load URL image in Flutter ที่เป็นของ urlImage.dart ครับ แสดงว่า เมื่อเปิดแอพ จะแสดง Content ของ urlImage.dart ครับ

 

สร้าง Object CachedNetworkImage โดยจะดึกรูปจาก imageUrl ที่กำหนดไว้ ไปแสดง แต่ๆๆๆๆๆ ถ้ากำลังโหลด ถ้าทำไม่สำเร็จ จะมี CircularProgress แสดงให้ครับ

นี่ไง CircularProgress

แต่ถ้า cachedNetworkImage โหลดเสร็จให้ไปแสดงที่ child นี่ครับ

 ลองทดสอบ และ ต่อมาเพิ่ม ปุ่ม Back

และอีกปุ่ม Next

 

มาสเตอร์ ประกาศตัวแปร Array imageURLs ขนาด 10 โดยมีสมาชิคเป็น url ของรูปภาพต่างๆ แบบนี้

ประกาศตัวแปร indexImageInt มีค่าเริ่มต้นเป็น 0

กำหนด imageUrl ให้มีค่าเท่ากับ imageURLs[indexImageInt] และ ลองทดสอบบน Simulator

 

 

ที่ปุ่ม Back จะทำหน้าที่ ลดค่าของ indexImageInt มีผลต่อการแสดงภาพที่มี Index น้อยๆ ทุกครั้งที่ คลิก Back แต่ถ้า indexImageInt มีค่าน้อยหรือเท่ากับ ศูนย์ indexImageInt จะมีค่าเท่ากับ ขนาดของ Array ครับ

ในทางตรงกันข้าม ถ้าคลิก Next จะเป็นการเพิ่ม indexImageInt โดยการเพิ่ม จะต้องไม่มากกว่า หรือเท่ากับ ขนาดของ Array ถ้าเท่าให้ indexImageInt มีค่าเป็น 0 ครับ  สำหรับใครไม่ทัน สามารถโหลด Source Code ได้ที่ https://github.com/masterUNG/load_image_internet 

 

 

 

 

 

 

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g