[flutter] Swipeable Widget을 활용한 이미지 필터 기능 구현하기

08 Dec 2023

flutter

이미지 필터링은 사용자에게 흥미로운 기능을 제공하는 데 도움이 될 수 있습니다. Flutter는 Swipeable Widget을 통해 사용자가 이미지에 필터를 적용하면서 결과를 실시간으로 볼 수 있는 기능을 제공합니다.

이번 글에서는 Swipeable Widget을 사용하여 Flutter 앱에서 이미지 필터링을 구현하는 방법을 알아보겠습니다.

필요한 패키지 추가하기

먼저, 화면 상에서 이미지 필터를 적용하고 스와이프하여 결과를 볼 수 있도록 하는 데 필요한 패키지를 추가해야 합니다. 이에 따라, flutter_swiper와 이미지 필터를 적용할 수 있는 패키지인 image를 사용합니다.

dependencies:
  flutter_swiper: ^1.1.6
  image: ^3.0.1

위의 패키지들을 pubspec.yaml 파일에 추가한 후, flutter pub get 명령어를 실행하여 패키지를 설치합니다.

다음으로, Swipeable Widget을 이용하여 이미지 필터링을 구현해보겠습니다. 먼저, 필터를 적용할 이미지를 로드하고, Swipeable Widget을 통해 이미지를 스와이프하여 필터를 변경할 수 있도록 합니다.

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:image/image.dart' as img;

class ImageFilterScreen extends StatefulWidget {
  @override
  _ImageFilterScreenState createState() => _ImageFilterScreenState();
}

class _ImageFilterScreenState extends State<ImageFilterScreen> {
  List<Filter> _filters = [
    Filter(name: 'Original', filter: (img.Image image) => image),
    Filter(
        name: 'Sepia',
        filter: (img.Image image) =>
            img.grayscale(image, type: img.GrayscaleType.sepia)),
    // Add more filter options as needed
  ];
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Filter'),
      ),
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.memory(
            img.encodePng(_filters[index].filter(_originalImage)),
          );
        },
        itemCount: _filters.length,
        onIndexChanged: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _filters
            .map((filter) => BottomNavigationBarItem(
                  icon: Icon(Icons.image),
                  label: filter.name,
                ))
            .toList(),
        currentIndex: _currentIndex,
        onTap: (int index) {
          _swiperController.move(index);
        },
      ),
    );
  }
}

class Filter {
  final String name;
  final img.Image Function(img.Image) filter;

  Filter({required this.name, required this.filter});
}

위의 코드는 Swipeable Widget을 활용하여 이미지 필터링을 구현하는 예시입니다. 화면 상에는 선택한 이미지에 대한 필터링된 이미지가 표시되며, 사용자는 Swipeable한 하단 네비게이션 바를 통해 여러 필터 중 하나를 선택할 수 있습니다.

결론

이제 Swipeable Widget을 활용하여 Flutter 앱에서 이미지 필터링을 구현하는 방법을 알아보았습니다. Swipeable Widget을 사용하면 간단하면서도 직관적인 방법으로 이미지 필터링을 구현할 수 있습니다. 사용자가 이미지 필터를 실시간으로 적용하고 비교할 수 있는 이러한 기능은 앱의 사용성을 높이는 데 기여할 수 있습니다.

참고 문헌:

Flutter Swiper 패키지: https://pub.dev/packages/flutter_swiper
Image 패키지: https://pub.dev/packages/image

필요한 패키지 추가하기

Swipeable Widget을 활용한 이미지 필터링 구현하기

결론