[flutter] 플러터 Row 위젯을 이용한 이미지 갤러리 만들기

07 Dec 2023

flutter

플러터 (Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. Flutter를 사용하여 이미지 갤러리를 만들어 보는 방법을 알아보겠습니다.

Row 위젯

Row 위젯은 수평으로 위치한 한 줄의 위젯들을 가로로 나열하는 역할을 합니다. 이미지 갤러리를 만들기 위해서는 Row 위젯을 사용하여 이미지 위젯들을 가로로 나열할 수 있습니다.

Row(
  children: [ 
    // 이미지 위젯들을 나열할 위치
  ],
)

이미지 위젯 생성

이미지 위젯을 생성하기 위해 Image 위젯을 사용할 수 있습니다. Image 위젯에는 이미지 파일의 경로를 지정하거나, 네트워크 URL을 지정하여 이미지를 가져올 수 있습니다.

Image(
  image: AssetImage('assets/images/example.png'), // 이미지 파일의 경로
  // 네트워크 URL을 사용하려면 `NetworkImage`를 사용합니다.
  // image: NetworkImage('http://example.com/image.jpg'), 
)

코드 예제

아래는 플러터 Row 위젯을 이용한 이미지 갤러리 예제입니다.

import 'package:flutter/material.dart';

class ImageGallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal, // 수평으로 스크롤 가능하도록 설정
        children: [
          Row(
            children: [
              Image(
                image: AssetImage('assets/images/image1.jpg'),
              ),
              Image(
                image: AssetImage('assets/images/image2.jpg'),
              ),
              Image(
                image: AssetImage('assets/images/image3.jpg'),
              ),
              // 추가적인 이미지 위젯들을 여기에 추가할 수 있습니다.
            ],
          ),
        ],
      ),
    );
  }
}

위 예제에서는 Container 위젯을 사용하여 이미지 갤러리 컨테이너를 생성하고, ListView 위젯으로 스크롤 가능한 리스트 뷰를 생성하고 있습니다. 그리고 Row 위젯을 사용하여 이미지 위젯들을 가로로 나열하고 있습니다.

결과 확인

위 예제를 실행하면 수평으로 스크롤 가능한 이미지 갤러리를 확인할 수 있습니다. 위젯들을 추가하거나 이미지 파일의 경로를 수정하여 원하는 이미지 갤러리를 만들 수 있습니다.

플러터에 대한 더 자세한 내용은 공식 문서를 참고하세요.