camera_preview_screen.dart

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'analyzing_screen.dart';

class CameraPreviewScreen extends StatefulWidget {
  const CameraPreviewScreen({super.key});

  @override
  State<CameraPreviewScreen> createState() => _CameraPreviewScreenState();
}

class _CameraPreviewScreenState extends State<CameraPreviewScreen> {
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickFromGallery() async {
    final picked = await _picker.pickImage(source: ImageSource.gallery);
    if (picked != null && mounted) {
      await _analyzeAndNavigate(picked);
    }
  }

  Future<void> _takePhoto() async {
    final picked = await _picker.pickImage(source: ImageSource.camera);
    if (picked != null && mounted) {
      await _analyzeAndNavigate(picked);
    }
  }

  Future<void> _analyzeAndNavigate(XFile picked) async {
    // ไปหน้ากำลังวิเคราะห์
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => AnalyzingScreen(imagePath: picked.path),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFA726),
      body: Stack(
        children: [
          const Center(
            child: Text(
              'กรุณาเลือกรูปภาพหรือถ่ายภาพ',
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              color: const Color(0xFFFFA726),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    icon: const Icon(Icons.photo_library, size: 30),
                    onPressed: _pickFromGallery,
                  ),
                  GestureDetector(
                    onTap: _takePhoto,
                    child: Container(
                      width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.white,
                        border: Border.all(color: Colors.black, width: 2),
                      ),
                      child: const Icon(Icons.camera_alt, color: Colors.black),
                    ),
                  ),
                  const SizedBox(width: 30), // ปุ่มสลับกล้อง (เว้นที่ไว้)
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

1. โครงสร้างคลาส

class CameraPreviewScreen extends StatefulWidget {
  const CameraPreviewScreen({super.key});

  @override
  State<CameraPreviewScreen> createState() => _CameraPreviewScreenState();
}

• เป็น StatefulWidget เพราะต้อง จัดการสถานะของการเลือกภาพ (จาก gallery หรือ camera)

---

2. ตัวแปรและ ImagePicker

final ImagePicker _picker = ImagePicker();

• _picker → ใช้เปิด gallery หรือ camera เพื่อเลือก/ถ่ายภาพ

---

3. ฟังก์ชันเลือกภาพจาก Gallery

Future<void> _pickFromGallery() async {
  final picked = await _picker.pickImage(source: ImageSource.gallery);
  if (picked != null && mounted) {
    await _analyzeAndNavigate(picked);
  }
}

• เปิด gallery ให้ผู้ใช้เลือกภาพ

• ถ้าเลือกได้ → ส่งไปหน้ากำลังวิเคราะห์ (AnalyzingScreen)

---

4. ฟังก์ชันถ่ายภาพจาก Camera

Future<void> _takePhoto() async {
  final picked = await _picker.pickImage(source: ImageSource.camera);
  if (picked != null && mounted) {
    await _analyzeAndNavigate(picked);
  }
}

• ใช้กล้องถ่ายภาพ → ส่งไปหน้ากำลังวิเคราะห์

---

5. ฟังก์ชันนำทางไป AnalyzingScreen

Future<void> _analyzeAndNavigate(XFile picked) async {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => AnalyzingScreen(imagePath: picked.path),
    ),
  );
}

• ส่ง path ของไฟล์ภาพไปหน้า AnalyzingScreen เพื่อประมวลผล

---

6. Build UI

return Scaffold(
  backgroundColor: const Color(0xFFFFA726),
  body: Stack(
    children: [
      const Center(
        child: Text(
          'กรุณาเลือกรูปภาพหรือถ่ายภาพ',
          style: TextStyle(color: Colors.black, fontSize: 20),
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          color: const Color(0xFFFFA726),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                icon: const Icon(Icons.photo_library, size: 30),
                onPressed: _pickFromGallery,
              ),
              GestureDetector(
                onTap: _takePhoto,
                child: Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    border: Border.all(color: Colors.black, width: 2),
                  ),
                  child: const Icon(Icons.camera_alt, color: Colors.black),
                ),
              ),
              const SizedBox(width: 30), // ปุ่มสลับกล้อง (เว้นที่ไว้)
            ],
          ),
        ),
      ),
    ],
  ),
);

อธิบายส่วนสำคัญ:

1. Stack → วางข้อความตรงกลาง และปุ่มด้านล่าง

2. Center → ข้อความ "กรุณาเลือกรูปภาพหรือถ่ายภาพ"

3. Positioned(bottom:0) → แถบปุ่มด้านล่าง

4. ปุ่มด้านล่าง:

   • IconButton(Icons.photo_library) → เปิด gallery

   • กลมตรงกลาง (GestureDetector) → เปิดกล้อง

   • SizedBox(width:30) → เว้นช่องสำหรับปุ่มสลับกล้อง (ไม่ได้ใช้งานตอนนี้)

---

7. สรุปง่าย ๆ

• หน้า CameraPreviewScreen ให้ผู้ใช้เลือกภาพจาก gallery หรือถ่ายภาพด้วยกล้อง

• หลังเลือกภาพ → ไปหน้า AnalyzingScreen เพื่อตรวจจับสัตว์และประเมินอายุ

• UI ใช้ Stack วางข้อความตรงกลาง + แถบปุ่มด้านล่าง

• ปุ่มถ่ายรูปเป็นวงกลม, gallery เป็น icon ปกติ