이번에는 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 패키지 문서를 참조해보세요.