[flutter] AspectRatio를 사용하여 이미지 갤러리 만들기

21 Dec 2023

flutter

이미지 갤러리를 만들고 싶다면 flutter에서 AspectRatio를 사용하는 것이 좋은 방법입니다. AspectRatio widget은 가로세로 비율을 유지하면서 child widget을 정의된 비율로 크기를 조정할 수 있습니다.

이미지 갤러리 설계

이미지 갤러리를 설계하기 위해 우선 필요한 것은 이미지를 표시할 방법입니다. GridView나 ListView를 사용하여 이미지를 표시할 수 있지만, AspectRatio를 이용하면 이미지의 가로세로 비율을 유지하면서 균일한 형태로 표시할 수 있습니다.

AspectRatio를 사용한 이미지 갤러리 예제

다음은 AspectRatio를 사용하여 이미지 갤러리를 만드는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('이미지 갤러리'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 4.0,
            mainAxisSpacing: 4.0,
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return AspectRatio(
              aspectRatio: 1.0,
              child: Image.network(
                'https://via.placeholder.com/150',
                fit: BoxFit.cover,
              ),
            );
          },
        ),
      ),
    );
  }
}

이 예제에서는 GridView.builder를 사용하여 그리드 형태의 이미지 갤러리를 생성하고, 각 이미지는 Image.network를 이용하여 네트워크에서 가져옵니다. AspectRatio 위젯을 사용하여 이미지의 가로세로 비율을 1:1로 설정하여 균일한 크기로 표시하고 있습니다.

결론

flutter의 AspectRatio를 사용하여 이미지 갤러리를 만드는 방법을 알아보았습니다. 이미지를 균일한 크기와 가로세로 비율로 표시하기 위해 AspectRatio를 유용하게 활용할 수 있습니다. 이를 응용하여 다양한 이미지 갤러리 디자인을 시도해 보세요.

더 많은 자료는 flutter 공식 문서에서 찾아볼 수 있습니다.