main.dart

import 'package:flutter/material.dart';
import 'screens/main_screen.dart';

void main() {
  runApp(const PetBreedApp());
}

class PetBreedApp extends StatelessWidget {
  const PetBreedApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PetBreed Identifier',
      debugShowCheckedModeBanner: false,
      home: const SplashScreen(),
    );
  }
}

// เปลี่ยนจาก StatelessWidget → StatefulWidget เพื่อให้มี initState()
class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    // รอ 3 วินาทีแล้วไปหน้าข้อมูลสายพันธุ์
    Future.delayed(const Duration(seconds: 3), () {
      if (!mounted) return; // เช็กก่อนใช้ context
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => const MainScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFA726), // สีส้มสดใส
      body: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            // กำหนดขนาดตามหน้าจอ
            final width = constraints.maxWidth;
            final height = constraints.maxHeight;

            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // รูปภาพสัตว์
                  SizedBox(
                    height: height * 0.3,
                    child: Image.asset(
                      'assets/images/pets.png',
                      fit: BoxFit.contain,
                    ),
                  ),
                  SizedBox(height: height * 0.03),
                  Text(
                    'PetBreed Identifier',
                    style: TextStyle(
                      fontSize: width * 0.06, // ปรับขนาดตามหน้าจอ
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(height: height * 0.05),
                  // โหลดหมุน
                  const CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.black87),
                    strokeWidth: 3.5,
                  ),
                  SizedBox(height: height * 0.02),
                  Text(
                    'เริ่มต้นการใช้งาน...',
                    style: TextStyle(
                      fontSize: width * 0.04,
                      color: Colors.black87,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

---

1. main() และ App Root

void main() {
  runApp(const PetBreedApp());
}

class PetBreedApp extends StatelessWidget {
  const PetBreedApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PetBreed Identifier',
      debugShowCheckedModeBanner: false,
      home: const SplashScreen(),
    );
  }
}

• main() → จุดเริ่มต้นของแอป

• runApp() → เริ่มแอปด้วย widget PetBreedApp

• MaterialApp → วางโครงสร้างแอปแบบ Material Design

  • title → ชื่อแอป

  • debugShowCheckedModeBanner: false → ปิด banner สีแดง "debug"

  • home → หน้าแรกของแอปคือ SplashScreen

---

2. SplashScreen

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

• เป็น StatefulWidget เพราะต้องใช้ initState() ทำงานตอนเริ่มแอป

---

3. _SplashScreenState

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    Future.delayed(const Duration(seconds: 3), () {
      if (!mounted) return; // เช็กก่อนใช้ context
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => const MainScreen()),
      );
    });
  }

• initState() → ทำงานครั้งเดียวตอนสร้าง widget

• Future.delayed(Duration(seconds:3)) → รอ 3 วินาที

• Navigator.pushReplacement → เปลี่ยนหน้าเป็น MainScreen และลบ SplashScreen ออกจาก stack

• mounted → เช็กว่าหน้านี้ยังอยู่ใน widget tree หรือไม่

---

4. Layout ของ SplashScreen

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFA726),
      body: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final width = constraints.maxWidth;
            final height = constraints.maxHeight;

            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    height: height * 0.3,
                    child: Image.asset(
                      'assets/images/pets.png',
                      fit: BoxFit.contain,
                    ),
                  ),
                  SizedBox(height: height * 0.03),
                  Text(
                    'PetBreed Identifier',
                    style: TextStyle(
                      fontSize: width * 0.06,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(height: height * 0.05),
                  const CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.black87),
                    strokeWidth: 3.5,
                  ),
                  SizedBox(height: height * 0.02),
                  Text(
                    'เริ่มต้นการใช้งาน...',
                    style: TextStyle(
                      fontSize: width * 0.04,
                      color: Colors.black87,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

อธิบายแต่ละส่วน:

1. Scaffold → โครงสร้างหลักของหน้า

2. backgroundColor → สีส้มสดใส (#FFA726)

3. SafeArea → เว้นขอบหน้าจอเพื่อไม่ให้ content ติด status bar

4. LayoutBuilder → อ่านขนาดหน้าจอ (constraints.maxWidth, constraints.maxHeight) เพื่อปรับขนาด widget

5. Center → จัด Column ให้อยู่ตรงกลาง

6. Column → วาง widget แนวตั้ง

   • SizedBox(height: height*0.3) → กำหนดขนาดรูปภาพตามหน้าจอ

   • Image.asset() → แสดงรูปสัตว์จาก assets

   • Text() → ชื่อแอป ปรับขนาดตามหน้าจอ

   • CircularProgressIndicator → แสดง loading หมุน

   • Text() → ข้อความ "เริ่มต้นการใช้งาน..."

---

สรุปง่าย ๆ

• แอปเปิดมาจะเห็น SplashScreen สีส้ม มีรูปสัตว์ ชื่อแอป และ loading spinner

• รอ 3 วินาที → เปลี่ยนหน้าไป MainScreen

• ใช้ LayoutBuilder ปรับขนาด widget ตามขนาดหน้าจออัตโนมัติ

• StatefulWidget ใช้เพื่อเรียก initState() ทำงานตอนเริ่มแอป