[flutter] Card 위젯을 이용한 사진 갤러리 화면 구성하기

12 Dec 2023

flutter

이번에는 Flutter에서 Card 위젯을 사용하여 갤러리 화면을 만들어 보겠습니다. 카드 위젯을 사용하면 갤러리에서 사진을 표시하고 터치 이벤트를 처리하는 등 다양한 기능을 쉽게 구현할 수 있습니다.

1. Card 위젯 생성하기

먼저, 갤러리 화면에 표시할 각각의 사진을 Card 위젯으로 만들어 보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: GalleryScreen(),
  ));
}

class GalleryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사진 갤러리'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          _buildCard('image1.jpg'),
          _buildCard('image2.jpg'),
          _buildCard('image3.jpg'),
          _buildCard('image4.jpg'),
          // Add more cards for other images
        ],
      ),
    );
  }

  Widget _buildCard(String imageName) {
    return Card(
      child: InkWell(
        onTap: () {
          // Handle tap event for the image
        },
        child: Image.asset(
          'assets/$imageName',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

위 코드에서는 GalleryScreen 클래스에서 Scaffold 위젯을 사용하여 앱의 기본 레이아웃을 설정하고, GridView.count 위젯을 사용하여 격자 형태의 레이아웃으로 사진들을 표시합니다. 그리고 _buildCard 메서드에서 각 사진에 대한 카드를 생성합니다.

2. 이미지 터치 이벤트 처리하기

카드에 포함된 이미지를 터치했을 때의 이벤트 처리를 위해서는 InkWell 위젯을 사용하여 해당 이미지에 터치 가능한 영역을 지정하고, onTap 속성을 통해 터치 이벤트를 처리할 수 있습니다.

위 코드에서는 InkWell을 이용하여 사진을 터치했을 때의 이벤트를 처리할 수 있도록 설정하고, onTap 속성에 관련 코드를 추가하여 터치 이벤트를 처리할 수 있습니다.

이제, 간단한 갤러리 화면이 완성되었습니다. 사진을 터치했을 때 원하는 동작을 추가하면 더욱 풍부한 사용자 경험을 제공할 수 있습니다.

마치며

이번 포스트에서는 Flutter의 Card 위젯을 이용하여 갤러리 화면을 만드는 방법을 알아보았습니다. Card 위젯을 이용하면 간단하게 갤러리나 이미지 리스트 등 다양한 화면을 구성할 수 있습니다.

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