Colin's Blog
[flutter] 플러터 sticky 헤더를 사용한 이미지 슬라이더 만들기

플러터(Flutter) 프레임워크를 사용하면 쉽게 다양한 UI 컴포넌트를 만들 수 있습니다. 이번에는 Sticky 헤더를 사용하여 이미지 슬라이더를 만드는 방법에 대해 알아보겠습니다.

1. Sticky 헤더 위젯 설치

먼저, Sticky 헤더를 구현하기 위해 sticky_headers 플러그인을 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.0

pubspec.yaml 파일을 저장한 후, 터미널에서 flutter packages get 명령을 실행하여 의존성을 다운로드합니다.

2. 이미지 슬라이더 위젯 구현

이제 이미지 슬라이더 위젯을 구현해보겠습니다. 먼저, sticky_headers 패키지의 StickyHeader 위젯을 사용하여 Sticky 헤더를 생성합니다. 아래와 같이 코드를 작성해주세요.

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

class ImageSlider extends StatelessWidget {
  final List<String> images;

  ImageSlider(this.images);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: images.length,
      itemBuilder: (context, index) {
        return StickyHeader(
          header: Container(
            height: 50,
            color: Colors.grey,
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Text(
                "Image ${index+1}",
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          content: Image.network(images[index]),
        );
      },
    );
  }
}

위 코드에서는 images라는 문자열 리스트를 통해 이미지 URL을 전달받습니다. ListView.builder를 사용하여 이미지 개수만큼 아이템을 생성합니다. 각 아이템은 StickyHeader 위젯으로 래핑됩니다. 헤더 영역에는 “Image ${index+1}”과 같이 이미지 번호를 표시하고, 컨텐츠 영역에는 해당 이미지를 네트워크에서 불러옵니다.

3. ImageSlider 위젯 사용하기

마지막으로, 위에서 작성한 ImageSlider 위젯을 사용하여 이미지 슬라이더를 만들어보겠습니다. 아래와 같이 코드를 작성해주세요.

import 'package:flutter/material.dart';

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

class MyApp 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 MaterialApp(
      title: 'Image Slider',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Slider'),
        ),
        body: ImageSlider(images),
      ),
    );
  }
}

위 코드에서는 MyApp 위젯에서 images 리스트를 생성하여 ImageSlider 위젯에 전달합니다. 이를 통해 이미지 슬라이더를 구현할 수 있습니다.

결론

이제 플러터의 Sticky 헤더를 사용하여 이미지 슬라이더를 만들어보았습니다. Sticky 헤더를 사용하면 상단에 고정된 헤더를 구현할 수 있으므로 사용자 경험을 향상시킬 수 있습니다. 다양한 컴포넌트와 플러그인을 조합하여 플러터로 멋진 UI를 구현해보세요!

참고 자료:

© 2018 Colin. All rights reserved.