강아지 사진 갤러리 앱 Dialog

[name27]

main.dart

import 'dart:convert';

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var dio = Dio();
  var url = 'https://dog.ceo/api/breeds/image/random';
  var dogLength = 15;
  Future<dynamic> getData() async {
    var res = await dio.get(url);
    if (res.statusCode == 200 && Dog.fromMap(res.data).status == 'success') {
      return Dog.fromMap(res.data).message;
    }
    return '';
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          body: Center(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3),
                itemBuilder: (context, index) {
                  if (index < dogLength) {
                    dogLength++;
                  }
                  for (index = 0; index < dogLength; index++) {
                    return FutureBuilder(
                        future: getData(),
                        builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return const CupertinoActivityIndicator();
                          }
                          if (!snapshot.hasData)
                            return Center(child: const Text("데이터가 없습니다"));
                          List data = [];
                          data.add(snapshot.data);
                          if (snapshot.connectionState ==
                              ConnectionState.done) {
                            return GestureDetector(
                              onTap: () {
                                showDialog(
                                    context: context,
                                    builder: (context) {
                                      return Center(
                                          child: Dialog(
                                              shape: RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.all(
                                                          Radius.circular(
                                                              12.0))),
                                              child: Column(
                                                mainAxisSize: MainAxisSize.min,
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.stretch,
                                                children: [
                                                  ClipRRect(
                                                    borderRadius:
                                                        BorderRadius.only(
                                                            topLeft: Radius
                                                                .circular(12),
                                                            topRight:
                                                                Radius.circular(
                                                                    12)),
                                                    child: Image.network(
                                                      data[index],
                                                      fit: BoxFit.fitHeight,
                                                    ),
                                                  ),
                                                  TextButton(
                                                      onPressed: () {
                                                        Navigator.of(context)
                                                            .pop();
                                                      },
                                                      child: Text('close'))
                                                ],
                                              )));
                                    });
                              },
                              child: AspectRatio(
                                aspectRatio: 1 / 1,
                                child: Image.network(
                                  data[index],
                                  fit: BoxFit.cover,
                                ),
                              ),
                            );
                          }
                          return LinearProgressIndicator();
                        });
                  }
                  return SizedBox();
                }),
          )),
    );
  }
}

dog.dart

class Dog {
  String message;
  String status;

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

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

  Dog.fromMap(Map<String, dynamic> map)
      : message = map["message"],
        status = map["status"];

  @override
  toString() => '$message, $status';
}

[name27]

main.dart

import 'package:dio/dio.dart';
import 'package:dog_album_app/model/dog.dart';
import 'package:dog_album_app/widget/dog_dialog.dart';
import 'package:flutter/material.dart';

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

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

  Future<Dog?> getData() async {
    var dio = Dio();
    var url = 'https://dog.ceo/api/breeds/image/random';

    var res = await dio.get(url);
    if (res.statusCode == 200 && Dog.fromMap(res.data).status == 'success') {
      return Dog.fromMap(res.data);
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    var dogLength = 15;
    return MaterialApp(
      home: Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          body: Center(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, mainAxisSpacing: 4, crossAxisSpacing: 4),
                itemBuilder: (context, index) => FutureBuilder(
                      future: getData(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return snapshot.data?.message == null
                              ? SizedBox()
                              : GestureDetector(
                                  onTap: () {
                                    showDialog(
                                        context: context,
                                        builder: (context) =>
                                            DogDialog(dog: snapshot.data!));
                                  },
                                  child: Image.network(
                                    snapshot.data!.message,
                                    fit: BoxFit.cover,
                                  ));
                        }
                        return CircularProgressIndicator();
                      },
                    )),
          )),
    );
  }
}

dog_dialog.dart

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

class DogDialog extends StatelessWidget {
  const DogDialog({super.key, required this.dog});
  final Dog dog;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        clipBehavior: Clip.antiAlias,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(dog.message),
            TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Close'))
          ],
        ),
      ),
    );
  }
}