19일차 Hero

[name27]

main.dart

import 'package:dio/dio.dart';
import 'package:easy_dog_app/main_page.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());
  }
}

main_page.dart

import 'package:dio/dio.dart';
import 'package:easy_dog_app/dog_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

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

    var url = 'https://sfacassignment-default-rtdb.firebaseio.com/.json';

    List<Map<String, dynamic>> dogList = [];

    getData() async {
      var res = await dio.get(url);
      for (int i = 0; i < res.data["body"].length; i++) {
        dogList.add({});
        dogList[i].addAll({
          "msg": "${res.data["body"][i]["msg"]}",
          "url": "${res.data["body"][i]["url"]}"
        });
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('19일차 과제'),
      ),
      body: Center(
        child: FutureBuilder(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done)
              return Padding(
                padding: const EdgeInsets.all(12.0),
                child: ListView.separated(
                    itemCount: dogList.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: GestureDetector(
                          onTap: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => DogPage(
                                        imgUrl: dogList[index]["url"],
                                        dogList: dogList[index])));
                          },
                          child: Hero(
                            tag: dogList[index],
                            child: SizedBox(
                                width: 50,
                                height: 50,
                                child: Image.network(
                                  dogList[index]["url"],
                                  fit: BoxFit.cover,
                                )),
                          ),
                        ),
                        title: Text(dogList[index]["msg"]),
                      );
                    },
                    separatorBuilder: (context, index) {
                      return SizedBox(
                        height: 3,
                      );
                    }),
              );
            return SizedBox();
          },
        ),
      ),
    );
  }
}

dog_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class DogPage extends StatelessWidget {
  const DogPage({super.key, required this.imgUrl, required this.dogList});
  final String imgUrl;
  final dynamic dogList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
          child: Hero(
              tag: dogList,
              child: Image.network(
                imgUrl,
                fit: BoxFit.fill,
              ))),
    );
  }
}

[name27]

main_page.dart

SizedBox 에서 AspectRatio 비율 1:1로 변경

import 'package:dio/dio.dart';
import 'package:easy_dog_app/dog_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:intl/intl.dart';

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

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

    var url = 'https://sfacassignment-default-rtdb.firebaseio.com/.json';

    List<Map<String, dynamic>> dogList = [];

    getData() async {
      var res = await dio.get(url);
      for (int i = 0; i < res.data["body"].length; i++) {
        dogList.add({});
        dogList[i].addAll({
          "msg": "${res.data["body"][i]["msg"]}",
          "url": "${res.data["body"][i]["url"]}"
        });
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('19일차 과제'),
      ),
      body: Center(
        child: FutureBuilder(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done)
              return Padding(
                padding: const EdgeInsets.all(12.0),
                child: ListView.separated(
                    itemCount: dogList.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: GestureDetector(
                          onTap: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => DogPage(
                                        imgUrl: dogList[index]["url"],
                                        dogList: dogList[index])));
                          },
                          child: Hero(
                            tag: dogList[index],
                            child: AspectRatio(
                              aspectRatio: 1 / 1,
                              child: Image.network(
                                dogList[index]["url"],
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                        title: Text(dogList[index]["msg"]),
                      );
                    },
                    separatorBuilder: (context, index) {
                      return SizedBox(
                        height: 8,
                      );
                    }),
              );
            return SizedBox();
          },
        ),
      ),
    );
  }
}