<aside> ❓ 1. 다음의 공개된 API를 분석하고, 클래스를 활용하여 적용 후 강아지사진을 보여주는 앱을 다음과 같이 만드시오.

• https://dog.ceo/api/breeds/image/random

• gif

• 반드시 네트워크의 데이터를 받아와서 제작한 클래스에 적용하시오.

• 3개의 강아지 사진이 갤러리 형태로 나오도록 만드시오.

• 강아지 사진을 클릭하면 강아지 사진이 Dialog로 나오도록 만드시오. </aside>

• DogImage.dart

  class DogImage {
    String message;
    String status;
  
    DogImage({required this.message, required this.status});
  
    factory DogImage.fromMap(Map<String, dynamic> map) {
      return DogImage(
        message: map['message'],
        status: map['status'],
      );
    }
  }
  

• main.dart

  import 'package:dio/dio.dart';
  import 'package:flutter/material.dart';
  
  import 'DogImage.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
  
      Future<DogImage?> getData() async {
        Dio dio = Dio();
        var res = await dio.get('<https://dog.ceo/api/breeds/image/random>');
  
        if (res.statusCode == 200) {
          return DogImage.fromMap(res.data);
        }
        return null;
      }
  
      return MaterialApp(
        home: Scaffold(
          body: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 1 / 1,
            ),
            itemBuilder: (context, index) {
              return FutureBuilder(
                future: getData(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    return GestureDetector(
                      onTap: () {
                        showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return ImageDialog(img: snapshot.data!.message);
                          },
                        );
                      },
                      child: Image.network(
                        snapshot.data!.message,
                        fit: BoxFit.cover,
                      ),
                    );
                  } else {
                    return Center(child: CircularProgressIndicator());
                  }
                }
              );
            }
          ),
        )
      );
    }
  }
  
  // dialog
  class ImageDialog extends StatelessWidget {
    const ImageDialog({Key? key, required this.img}) : super(key: key);
  
    final String img;
  
    @override
    Widget build(BuildContext context) {
      return Dialog(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(img),
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Close'),
            ),
          ],
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      );
    }
  }