[flutter] 플러터 GridView에서 아이템을 클릭해서 사진을 확대하여 보여주는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 뷰를 표시하고, 사용자가 아이템을 클릭했을 때 그 아이템에 대한 사진을 확대하여 보여주는 기능을 구현하는 방법을 살펴보겠습니다.

GridView 및 확대 기능 구현

먼저, GridView를 사용하여 그리드 뷰를 표시하고, GestureDetector 위젯을 사용하여 아이템을 클릭할 수 있는 기능을 추가합니다. 그런 다음, 클릭된 아이템에 대한 확대하여 보여주는 기능을 구현합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyGridView(),
    );
  }
}

class MyGridView extends StatelessWidget {
  List<String> images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // Add more image paths
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid View Example'),
      ),
      body: GridView.builder(
        itemCount: images.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              // Handle item click and show the enlarged image
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => EnlargedImage(imagePath: images[index]),
                ),
              );
            },
            child: Image.asset(images[index]),
          );
        },
      ),
    );
  }
}

class EnlargedImage extends StatelessWidget {
  final String imagePath;

  EnlargedImage({required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Image.asset(
          imagePath,
          fit: BoxFit.contain, // Adjust the fit as per your requirement
        ),
      ),
    );
  }
}

위의 예제는 GridView를 생성하고, 각 아이템을 클릭했을 때 해당 이미지를 확대하여 보여주는 기능을 구현한 것입니다.

이제 위 코드를 참고하여 원하는 방식으로 GridView와 아이템을 클릭해서 확대하여 보여주는 기능을 구현해 보시기 바랍니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.