[flutter] cupertino_icons를 사용하여 아이콘에 스위치 효과 설정하기

이번에는 Flutter에서 아이콘에 스위치 효과를 설정하는 방법에 대해 알아보겠습니다. Flutter에서 아이콘을 사용하는데에는 cupertino_icons 패키지를 사용할 수 있습니다.

cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일을 열고 dependencies 섹션에 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 작성해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

pubspec.yaml 파일을 저장한 후에는 패키지를 다운로드하고 프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행해야 합니다.

스위치 아이콘 추가하기

이제, cupertino_icons 패키지에서 제공하는 아이콘을 사용하여 스위치 아이콘을 추가해보겠습니다. 아래는 스위치 아이콘을 사용하는 예시입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Switch Icon Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Switch Icon Example'),
        ),
        body: Center(
          child: CupertinoSwitch(
            value: true,
            onChanged: (bool value) {},
            activeColor: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위의 코드에서 CupertinoSwitch 위젯을 사용하여 스위치 아이콘을 생성합니다. value 속성은 스위치의 초기 상태를 설정하며, onChanged 속성은 스위치가 토글될 때 호출되는 이벤트 핸들러를 정의합니다. activeColor 속성은 스위치가 켜진 상태일 때의 색상을 정의합니다.

실행 결과 확인하기

위의 코드를 실행하면 스위치 아이콘이 나타난 화면을 볼 수 있습니다. 기본적으로는 활성화된 상태로 표시됩니다. 스위치를 토글하면 onChanged 이벤트 핸들러가 호출되는 것을 확인할 수 있습니다.

이것으로 Flutter에서 cupertino_icons 패키지를 사용하여 아이콘에 스위치 효과를 설정하는 방법에 대해 알아보았습니다. 새로운 아이콘을 사용해보거나 스위치 동작을 커스터마이즈하고 싶다면 cupertino_icons 패키지 문서를 참조해보세요.