[flutter] cupertino_icons를 이용한 아이콘에 이미지 슬라이더 효과 추가하기

30 Nov 2023

flutter

이번에는 Flutter 앱에서 cupertino_icons 패키지를 이용하여 아이콘으로 이미지 슬라이더 효과를 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

먼저, cupertino_icons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래의 코드를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

변경 사항을 적용하기 위해 패키지를 업데이트하려면 터미널에서 다음 명령을 실행하세요.

flutter pub get

이미지 슬라이더 위젯 생성하기

이제 cupertino_icons 패키지를 이용하여 이미지 슬라이더 위젯을 생성해보겠습니다. 아래의 코드를 참고하여 새로운 위젯을 생성해주세요.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

class ImageSlider extends StatefulWidget {
  @override
  _ImageSliderState createState() => _ImageSliderState();
}

class _ImageSliderState extends State<ImageSlider> {
  int currentIndex = 0;

  List<IconData> iconList = [
    CupertinoIcons.home,
    CupertinoIcons.heart,
    CupertinoIcons.photo_camera,
    CupertinoIcons.person,
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 200,
          child: Icon(iconList[currentIndex], size: 100),
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: Icon(CupertinoIcons.arrow_left),
              onPressed: () {
                setState(() {
                  currentIndex = (currentIndex - 1) % iconList.length;
                });
              },
            ),
            IconButton(
              icon: Icon(CupertinoIcons.arrow_right),
              onPressed: () {
                setState(() {
                  currentIndex = (currentIndex + 1) % iconList.length;
                });
              },
            ),
          ],
        ),
      ],
    );
  }
}

위의 코드에서는 _ImageSliderState 클래스에서 StatefulWidget을 상속받아 이미지 슬라이더를 구현하였습니다. currentIndex 변수는 현재 선택된 아이콘의 인덱스를 추적하는 역할을 합니다. iconList 변수는 슬라이더에 표시될 아이콘의 목록을 정의하는 역할을 합니다.

이미지 슬라이더 위젯 사용하기

ImageSlider 위젯을 사용하여 화면에 이미지 슬라이더를 추가해보겠습니다. 아래의 코드를 참고하여, main.dart 파일에 이미지 슬라이더를 추가해주세요.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

import 'image_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Slider'),
        ),
        body: Center(
          child: ImageSlider(),
        ),
      ),
    );
  }
}

위의 코드에서는 main.dart 파일에서 ImageSlider 위젯을 불러와서 Scaffold의 body 속성에 추가하였습니다.

실행 결과 확인하기

이제 앱을 실행하여 이미지 슬라이더가 제대로 동작하는지 확인해볼 수 있습니다. 터미널에서 다음 명령을 실행하여 앱을 실행해보세요.

flutter run

앱이 시작되면 이미지 슬라이더가 보여질 것입니다. 왼쪽과 오른쪽 화살표 버튼을 눌러 아이콘을 슬라이드할 수 있습니다.

마무리

이번에는 cupertino_icons 패키지를 이용하여 Flutter 앱에 아이콘으로 이미지 슬라이더를 추가하는 방법을 알아보았습니다. cupertino_icons를 사용하면 iOS 스타일의 아이콘을 간편하게 적용할 수 있습니다. 앱에 다양한 스타일의 이미지 슬라이더를 추가하여 사용자 경험을 향상시킬 수 있습니다.