[flutter] 플러터 sticky 헤더를 가진 스크롤 가능한 이미지 뷰어 만들기

30 Nov 2023

flutter

이번 튜토리얼에서는 Flutter를 사용하여 sticky 헤더와 함께 스크롤 가능한 이미지 뷰어를 만드는 방법에 대해 알아보겠습니다. Sticky 헤더는 스크롤될 때 화면 상단에 고정되는 헤더를 의미합니다.

개요

우리가 만들 이미지 뷰어는 여러 개의 이미지를 스크롤할 수 있어야 하며, 상단에는 sticky 헤더가 있어야 합니다. 또한, 사용자가 이미지를 확대하거나 축소할 수 있어야 합니다.

시작하기 전에

이 튜토리얼을 따라하기 위해 Flutter를 개발 환경에 설치해야 합니다. Flutter 설치에 관한 자세한 내용은 Flutter 공식 문서를 참조하십시오.

Step 1: 프로젝트 설정

먼저, Flutter 프로젝트를 생성합니다. 이를 위해 다음 명령을 터미널에서 실행합니다.

flutter create sticky_header_image_viewer
cd sticky_header_image_viewer

Step 2: sticky_header 패키지 추가

이미지 뷰어의 sticky 헤더를 구현하기 위해 sticky_header 패키지를 추가합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음과 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sticky_header: ^0.3.2

설정 변경 후 패키지를 가져오기 위해 터미널에서 다음 명령을 실행합니다.

flutter pub get

Step 3: 이미지 뷰어 UI 구성

main.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:sticky_header/sticky_header.dart';

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

class ImageViewerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Header Image Viewer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ImageViewerScreen(),
    );
  }
}

class ImageViewerScreen extends StatelessWidget {
  final List<String> images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Image Viewer'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverStickyHeader(
            header: Container(
              height: 60,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'Sticky Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) => Image.network(images[index]),
                childCount: images.length,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

이 코드에서는 sticky_header 패키지를 사용하여 스크롤 가능한 이미지 뷰어를 만들어냅니다. 이미지 URL을 포함하는 간단한 이미지 목록이 있으며, 해당 이미지를 그리드 형식으로 보여줍니다. Sticky 헤더는 빨간색 배경과 “Sticky Header”라는 텍스트로 구성됩니다.

Step 4: 앱 실행 및 테스트

터미널에서 다음 명령을 실행하여 앱을 실행합니다.

flutter run

이제 스크롤 가능한 이미지 뷰어가 있는 앱이 실행됩니다. 상단에 sticky 헤더와 그리드로 나열된 이미지를 확인할 수 있습니다.

결론

이제 플러터를 사용하여 sticky 헤더를 가진 스크롤 가능한 이미지 뷰어를 만드는 방법에 대해 알아보았습니다. Flutter의 다양한 패키지를 활용하여 원하는 사용자 인터페이스를 구축할 수 있습니다.

더 많은 자세한 내용과 예제 코드는 Flutter 공식 문서를 참조해주세요.