Flutter에서는 Cupertino 디자인을 지원하기 위해 cupertino_icons 패키지를 사용할 수 있습니다. 이 패키지를 사용하면 iOS 디자인 시스템에 기반한 아이콘을 손쉽게 사용할 수 있습니다.
이번 글에서는 cupertino_icons를 사용하여 아이콘의 비사용 상태를 설정하는 방법에 대해 알아보겠습니다.
1. pubspec.yaml 파일 수정
먼저, 프로젝트의 pubspec.yaml 파일을 열고 dependencies 영역에 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 작성해주세요.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.3
수정 후에는 pubspec.yaml 파일을 저장하고 종속성을 업데이트해주세요.
2. 아이콘 사용하기
아이콘을 사용하려면 CupertinoIcons 클래스를 임포트하고 원하는 아이콘을 사용할 수 있습니다. 예를 들어, 홈 화면에 사용 가능한 상태와 비사용 상태를 가진 아이콘을 만들어보겠습니다.
먼저, CupertinoSwitch 위젯을 사용하여 아이콘의 상태를 전환하는 스위치를 생성합니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino_icons.dart';
class IconToggle extends StatefulWidget {
@override
_IconToggleState createState() => _IconToggleState();
}
class _IconToggleState extends State<IconToggle> {
bool iconEnabled = true;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Icon Toggle'),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoSwitch(
value: iconEnabled,
onChanged: (value) {
setState(() {
iconEnabled = value;
});
},
),
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
iconEnabled ? CupertinoIcons.check_mark : CupertinoIcons.xmark,
size: 48.0,
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: IconToggle(),
));
}
위의 코드에서 CupertinoSwitch 위젯은 iconEnabled 불린 값을 토글하여 아이콘 상태를 변경합니다. 아이콘에 대한 비활성 및 활성 상태는 삼항 연산자를 사용하여 설정됩니다.
3. 결과 확인하기
위의 코드를 실행하면 스위치를 토글할 때마다 아이콘의 상태가 변경되는 것을 확인할 수 있습니다. CupertinoIcons.check_mark 아이콘은 활성화 상태에서 나타나고, CupertinoIcons.xmark 아이콘은 비활성화 상태에서 나타납니다.
이를 통해 cupertino_icons를 사용하여 아이콘의 비사용 상태를 설정하는 방법을 알아보았습니다. 이 기능을 활용하여 iOS 스타일의 아이콘들을 쉽고 간편하게 사용할 수 있습니다.
자세한 내용은 Cupertino Icons documentation를 참조하시기 바랍니다.
Happy coding!