# breed\_detail\_screen.dart

```dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../models/pet_model.dart';

class BreedDetailScreen extends StatefulWidget {
  final Pet pet;
  const BreedDetailScreen({super.key, required this.pet});

  @override
  State<BreedDetailScreen> createState() => _BreedDetailScreenState();
}

class _BreedDetailScreenState extends State<BreedDetailScreen> {
  Map<String, String> lifeStages = {};

  @override
  void initState() {
    super.initState();
    loadLifeStages();
  }

  Future<void> loadLifeStages() async {
    final jsonString = await rootBundle.loadString('assets/data/lifestage_care.json');
    final Map<String, dynamic> jsonMap = jsonDecode(jsonString);
    final animalLifeStages = jsonMap[widget.pet.animalType]; // เช่น 'สุนัข' หรือ 'แมว'

    if (animalLifeStages != null) {
      setState(() {
        lifeStages = Map<String, String>.from(animalLifeStages);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFA726),
      appBar: AppBar(
        backgroundColor: const Color(0xFFCE8426),
        title: Text(
          widget.pet.name,
          style: const TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        iconTheme: const IconThemeData(color: Colors.black),
      ),
      body: lifeStages.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16),
              children: [
                _buildImageSection(),
                _buildBreedName(),
                _buildInfoExpansionTiles(),
                _buildLifeStageSection(),
              ],
            ),
    );
  }

  Widget _buildImageSection() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: Container(
        height: 270,
        width: double.infinity,
        color: Colors.grey[200],
        child: Image.asset(
          widget.pet.imageAsset,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildBreedName() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Text(
        widget.pet.name,
        style: const TextStyle(
          fontSize: 26,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _buildInfoExpansionTiles() {
    return Column(
      children: [
        _buildExpansionTile(
          title: 'ประวัติ',
          content: widget.pet.history,
        ),
        _buildExpansionTile(
          title: 'อุปนิสัย',
          content: widget.pet.personality,
        ),
        _buildExpansionTile(
          title: 'อายุขัยเฉลี่ย',
          content: widget.pet.lifespan,
        ),
        _buildExpansionTile(
          title: 'สิ่งที่ต้องรู้ก่อนเลี้ยง',
          contentWidget: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: widget.pet.careTips.map((tip) => 
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 4),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('• ', style: TextStyle(fontSize: 16)),
                    Expanded(
                      child: Text(
                        tip,
                        style: const TextStyle(fontSize: 16),
                      ),
                    ),
                  ],
                ),
              ),
            ).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildExpansionTile({
    required String title,
    String? content,
    Widget? contentWidget,
  }) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      child: ExpansionTile(
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: contentWidget ??
                Text(
                  content ?? '',
                  style: const TextStyle(fontSize: 16),
                  textAlign: TextAlign.start,
                ),
          ),
        ],
      ),
    );
  }

  Widget _buildLifeStageSection() {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      child: ExpansionTile(
        title: const Text(
          'คำแนะนำการดูแลแต่ละช่วงวัย',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Color.fromARGB(255, 89, 57, 45),
          ),
        ),
        children: lifeStages.entries.map((entry) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  entry.key,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  entry.value,
                  style: const TextStyle(fontSize: 15),
                ),
                const Divider(),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}
```

***

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

```dart
class BreedDetailScreen extends StatefulWidget {
  final Pet pet;
  const BreedDetailScreen({super.key, required this.pet});
```

* `BreedDetailScreen` เป็น `StatefulWidget` เพราะต้องโหลดข้อมูล **life stages** จากไฟล์ JSON
* รับ `Pet pet` → object ของสายพันธุ์ที่จะแสดงรายละเอียด

***

#### **2. \_BreedDetailScreenState**

```dart
Map<String, String> lifeStages = {};

@override
void initState() {
  super.initState();
  loadLifeStages();
}
```

* `lifeStages` → เก็บคำแนะนำการดูแลตามช่วงวัย (เช่น ลูก, วัยรุ่น, ผู้ใหญ่, ผู้สูงอายุ)
* `initState()` → โหลด JSON ของ life stages ตอนสร้าง widget

***

#### **3. โหลด Life Stages จาก JSON**

```dart
Future<void> loadLifeStages() async {
  final jsonString = await rootBundle.loadString('assets/data/lifestage_care.json');
  final Map<String, dynamic> jsonMap = jsonDecode(jsonString);
  final animalLifeStages = jsonMap[widget.pet.animalType]; // 'สุนัข' หรือ 'แมว'

  if (animalLifeStages != null) {
    setState(() {
      lifeStages = Map<String, String>.from(animalLifeStages);
    });
  }
}
```

* โหลดไฟล์ `lifestage_care.json` จาก assets
* ดึงข้อมูลตามประเภทสัตว์ (`animalType`)
* แปลงเป็น `Map<String,String>` แล้วอัปเดต UI ด้วย `setState()`

***

#### **4. Scaffold + AppBar**

```dart
return Scaffold(
  backgroundColor: const Color(0xFFFFA726),
  appBar: AppBar(
    backgroundColor: const Color(0xFFCE8426),
    title: Text(widget.pet.name, style: const TextStyle(color: Colors.black)),
    centerTitle: true,
    iconTheme: const IconThemeData(color: Colors.black),
  ),
```

* หน้า detail สีส้ม
* AppBar แสดงชื่อสายพันธุ์
* iconTheme → กำหนดสี icon เป็นดำ

***

#### **5. Body ของหน้าจอ**

```dart
body: lifeStages.isEmpty
    ? const Center(child: CircularProgressIndicator())
    : ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildImageSection(),
          _buildBreedName(),
          _buildInfoExpansionTiles(),
          _buildLifeStageSection(),
        ],
      ),
```

* ถ้า `lifeStages` ยังโหลดไม่เสร็จ → แสดง loading spinner
* ถ้าโหลดเสร็จ → แสดง **ListView** ประกอบด้วย:
  1. รูปสัตว์
  2. ชื่อสายพันธุ์
  3. ข้อมูลรายละเอียด (ประวัติ, อุปนิสัย, อายุขัย, สิ่งที่ต้องรู้)
  4. คำแนะนำตามช่วงวัย

***

#### **6. ส่วนต่าง ๆ ของ UI**

**รูปสัตว์**

```dart
Widget _buildImageSection() {
  return ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Container(
      height: 270,
      color: Colors.grey[200],
      child: Image.asset(widget.pet.imageAsset, fit: BoxFit.cover),
    ),
  );
}
```

* แสดงรูปสัตว์แบบมีมุมโค้ง
* ขนาดสูง 270px

**ชื่อสายพันธุ์**

```dart
Widget _buildBreedName() {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 16),
    child: Text(
      widget.pet.name,
      style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    ),
  );
}
```

* ชื่อสายพันธุ์ตรงกลางตัวใหญ่

**ข้อมูลสายพันธุ์**

```dart
Widget _buildInfoExpansionTiles() {
  return Column(
    children: [
      _buildExpansionTile(title: 'ประวัติ', content: widget.pet.history),
      _buildExpansionTile(title: 'อุปนิสัย', content: widget.pet.personality),
      _buildExpansionTile(title: 'อายุขัยเฉลี่ย', content: widget.pet.lifespan),
      _buildExpansionTile(
        title: 'สิ่งที่ต้องรู้ก่อนเลี้ยง',
        contentWidget: Column(
          children: widget.pet.careTips.map((tip) => Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('• '),
              Expanded(child: Text(tip)),
            ],
          )).toList(),
        ),
      ),
    ],
  );
}
```

* ใช้ `ExpansionTile` → กดแล้วขยายดูรายละเอียด
* มี 4 ส่วนหลัก: ประวัติ, อุปนิสัย, อายุขัย, สิ่งที่ต้องรู้ก่อนเลี้ยง

***

#### **7. Life Stage Section**

```dart
Widget _buildLifeStageSection() {
  return Card(
    child: ExpansionTile(
      title: const Text('คำแนะนำการดูแลแต่ละช่วงวัย'),
      children: lifeStages.entries.map((entry) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(entry.key, style: const TextStyle(fontWeight: FontWeight.w600)),
              Text(entry.value),
              const Divider(),
            ],
          ),
        );
      }).toList(),
    ),
  );
}
```

* แสดงคำแนะนำตามช่วงวัย (ลูก, วัยรุ่น, ผู้ใหญ่, ผู้สูงอายุ)
* แต่ละ entry → ข้อความ + Divider

***

#### **8. สรุปง่าย ๆ**

1. โหลดข้อมูล `Pet` และ life stages จาก JSON
2. แสดงรูปสัตว์ + ชื่อสายพันธุ์
3. ใช้ `ExpansionTile` แสดงรายละเอียดแบบ expandable
4. มี section พิเศษสำหรับคำแนะนำการดูแลตามช่วงวัย
5. UI ใช้สีส้มสว่าง, Card, และ Scrollable ListView
