19일차 과제

Hero 위젯 사용하여 아래의 결과물을 제작하세요.

예제

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

main.dart

import 'package:assigment19/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.dart

import 'package:assigment19/secondpage.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

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

class _MainPageState extends State<MainPage> {
  var dio = Dio();
  var url = 'https://sfacassignment-default-rtdb.firebaseio.com/.json';

  Future getData() async {
    var res = await dio.get(url);
    return res.data['body'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('19일차 과제')),
      body: FutureBuilder(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return Padding(
                padding: const EdgeInsets.all(16),
                child: ListView.builder(
                    itemCount: snapshot.data!.length,
                    itemBuilder: ((context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                          children: [
                            GestureDetector(
                                child: Hero(
                                  tag: 'cachedimage',
                                  child: CachedNetworkImage(
                                    fit: BoxFit.fill,
                                    width: 80,
                                    height: 80,
                                    imageUrl: (snapshot.data?[index]['url']),
                                  ),
                                ),
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => HeroPage(
                                                cachedimage: (snapshot
                                                    .data![index]['url']),
                                              )));
                                }),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              snapshot.data![index]['msg'],
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                          ],
                        ),
                      );
                    })),
              );
            }
            return CircularProgressIndicator();
          }),
    );
  }
}

CachedNetworkImage는 이미지를 계속보여주기 위해 사용하였다

 

 

 

secondpage.dart

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class HeroPage extends StatelessWidget {
  const HeroPage({super.key, required this.cachedimage});
  final String cachedimage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Hero(
        tag: 'cachedhero',
        child: Center(
          child: CachedNetworkImage(
            imageUrl: cachedimage,
          ),
        ),
      ),
    );
  }
}

음 이게 왜 작동되는지 모르겠다..

분명

라는 에러가 뜨는데 동작은 된다;;

Android Emulator - Pixel_6_Pro_API_27_5554 2023-02-25 00-37-36.mp4

7.28MB