<aside> ❓ 1. Hero 위젯 사용하여 아래의 결과물을 제작하세요.

• gif
• 플러터 공식문서에서 예제코드 및 실행영상을 확인하세요.
  • https://docs.flutter.dev/development/ui/animations/hero-animations
• 네트워크 데이터를 얻을 수 있는 API 주소는 다음과 같습니다.
  • https://sniperfactory.com/sfac/read_dogs
  • JSON으로 데이터를 전달받을 수 있으며 body의 속성 값안에 List<Map> 형식으로 데이터를 받아볼 수 있습니다.

</aside>

• main.dart

import 'package:dio/dio.dart';
import 'package:first_app/homework/week5/day19/hero.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    Dio dio = Dio();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('19일차 과제'),
          centerTitle: false,
          elevation: 0,
        ),
        body: FutureBuilder(
          future: dio.get('<https://sniperfactory.com/sfac/read_dogs>'),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              var data = snapshot.data!.data['body'];
              return ListView.builder(
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ListTile(
                      leading: AspectRatio(aspectRatio: 1/1,
                        child: Hero(
                          tag: '$index',
                          child: Image.network(data[index]['url'], fit: BoxFit.cover,)
                        )
                      ),
                      title: Text(data[index]['msg']),
                      onTap: () {
                        Navigator.push(context, MaterialPageRoute(builder: (context) => HeroPage(imgUrl: data[index]['url'], heroTag: '$index',)));
                      },
                    ),
                  );
                },
              );
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

• hero.dart

import 'package:flutter/material.dart';

class HeroPage extends StatelessWidget {
  const HeroPage({Key? key, required this.imgUrl, required this.heroTag}) : super(key: key);

  final String imgUrl;
  final String heroTag;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('second page'),
        centerTitle: false,
        elevation: 0,
      ),
      body: Center(
        child: Hero(
          tag: heroTag,
          child: Image.network(imgUrl)
        ),
      ),
    );
  }
}