cupertino_icons는 Flutter에서 iOS 스타일 아이콘을 제공하는 패키지입니다. 이 패키지를 사용하여 아이콘을 추가하고, 타이머를 설정하는 방법을 알아보겠습니다.
1. cupertino_icons 패키지 추가하기
pubspec.yaml 파일의 dependencies 섹션에 다음 코드를 추가하여 cupertino_icons 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.4
그리고 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.
2. 아이콘 추가하기
cupertino_icons 패키지를 성공적으로 추가했다면, 이제 원하는 아이콘을 사용할 수 있습니다. Flutter에서는 Icon 위젯을 사용하여 아이콘을 추가할 수 있습니다. 다음은 예시 코드입니다.
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text('My Page'),
),
body: Center(
child: Icon(
CupertinoIcons.timer,
size: 50.0,
),
),
);
}
}
위 예시 코드에서는 CupertinoIcons.timer를 사용하여 타이머 아이콘을 추가하고 있습니다. size를 통해 원하는 크기로 아이콘을 조정할 수 있습니다.
3. 타이머 설정하기
아이콘에 타이머를 설정하려면 Timer 클래스나 Timer.periodic 메소드를 사용하여 원하는 동작을 구현할 수 있습니다. 예를 들어, 아이콘을 터치했을 때 5초마다 숫자를 증가시키는 타이머를 설정하려면 다음과 같이 코드를 작성할 수 있습니다.
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
import 'dart:async';
class TimerPage extends StatefulWidget {
@override
_TimerPageState createState() => _TimerPageState();
}
class _TimerPageState extends State<TimerPage> {
int _counter = 0;
Timer _timer;
@override
void dispose() {
_timer.cancel();
super.dispose();
}
void startTimer() {
_timer = Timer.periodic(Duration(seconds: 5), (Timer timer) {
setState(() {
_counter++;
});
});
}
void stopTimer() {
_timer.cancel();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text('Timer Page'),
),
body: Center(
child: GestureDetector(
onTap: () {
if (_timer == null) {
startTimer();
} else {
stopTimer();
}
},
child: Icon(
CupertinoIcons.timer,
size: 50.0,
),
),
),
bottomNavigationBar: CupertinoNavigationBar(
middle: Text('$_counter'),
),
);
}
}
위 코드에서는 _counter 변수를 통해 현재 숫자를 표시하고, _timer 변수를 통해 타이머를 관리합니다. startTimer 함수는 5초마다 _counter를 증가시키고, stopTimer 함수는 타이머를 중지시킵니다. 아이콘을 터치할 때마다 타이머를 시작하거나 중지합니다.
이제 TimerPage 위젯을 사용하여 타이머가 설정된 아이콘을 포함한 페이지를 만들 수 있습니다.
이상으로 cupertino_icons를 이용하여 아이콘에 타이머를 설정하는 방법에 대해 알아보았습니다. Flutter를 이용하여 다양한 아이콘과 동작을 구현해보세요!