24일차 과제 강아지사진활용

1. 다음의 공개된 API를 분석하고, 클래스를 활용하여 적용 후 강아지사진을 보여주는 앱을 다음과 같이 만드시오.
   • https://dog.ceo/api/breeds/image/random

• 반드시 네트워크의 데이터를 받아와서 제작한 클래스에 적용하시오.
• 3개의 강아지 사진이 갤러리 형태로 나오도록 만드시오.
• 강아지 사진을 클릭하면 강아지 사진이 Dialog로 나오도록 만드시오.

우선 lib/model/dog.dart 에서 클래스를 만듦

class Dog {
  String message;
  String status;

  Dog({required this.message, required this.status});

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

main.dart

import 'package:dogpicture_app/mainpage.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

MainPage를 호출하고

 

mainpage.dart

import 'package:dogpicture_app/model/dog.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';


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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  Dio dio = Dio();
  var url = 'https://dog.ceo/api/breeds/image/random';

  Future<Dog?> getdata() async {
    var res = await dio.get(url);
    if (res.statusCode == 200) {
      return Dog.fromMap(res.data);
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, mainAxisSpacing: 3, crossAxisSpacing: 3),
          itemBuilder: ((context, index) {
            return FutureBuilder(
                future: getdata(),
                builder: ((context, snapshot) {
                  if (snapshot.hasData) {
                    return GestureDetector(
                      onTap: () {
                        showDialog(
                            context: context,
                            builder: ((context) {
                              return Center(
                                child: Card(
                                  clipBehavior: Clip.antiAliasWithSaveLayer,
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20)),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Image.network(snapshot.data!.message),
                                      TextButton(
                                          onPressed: ((() {
                                            Navigator.pop(context);
                                          })),
                                          child: Text(
                                            'Close',
                                            style: TextStyle(fontSize: 30),
                                          ))
                                    ],
                                  ),
                                ),
                              );
                            }));
                      },
                      child: Image.network(
                        snapshot.data!.message,
                        fit: BoxFit.cover,
                      ),
                    );
                  }
                  return CircularProgressIndicator(strokeWidth: 8 //로딩굵기
                      );
                }));
          })),
    );
  }
}

Diolog,갤러리,로딩화면 결과