Flutter는 아름다운 사용자 인터페이스를 만들기 위한 크로스 플랫폼 프레임워크입니다. cupertino_icons 패키지는 iOS 스타일의 아이콘을 제공하여 Flutter 앱에서 아름다운 버튼을 만들 수 있게 도와줍니다. 이 글에서는 cupertino_icons를 사용하여 버튼에 아이콘을 추가하는 방법을 알아보겠습니다.
cupertino_icons 패키지 추가하기
먼저, pubspec.yaml 파일을 열어 cupertino_icons 패키지를 추가해야 합니다. 아래 코드를 dependencies 섹션에 추가하세요.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.3
패키지를 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 다운로드하고 프로젝트에 적용하세요.
아이콘을 가진 버튼 만들기
이제 버튼에 아이콘을 추가할 준비가 되었습니다. 버튼을 생성하고 아이콘을 추가하는 방법은 다음과 같습니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoButton(
onPressed: () {
// 버튼을 클릭했을 때 수행할 액션
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
CupertinoIcons.add, // 원하는 아이콘 선택
color: Colors.white,
),
SizedBox(width: 8.0), // 아이콘과 텍스트 사이의 간격 조절
Text(
'버튼',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
color: Colors.blue, // 버튼 색상 설정
borderRadius: BorderRadius.all(Radius.circular(8.0)), // 버튼 모서리를 둥글게 만들기
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0), // 버튼 내부 간격 설정
);
}
}
위의 코드에서 CupertinoButton 위젯을 사용하여 버튼을 생성합니다. child 속성에는 아이콘과 텍스트를 포함하는 Row 위젯을 넣어줍니다. 아이콘은 Icon 위젯으로 생성하고, CupertinoIcons 클래스에서 제공하는 아이콘 중 원하는 아이콘을 선택할 수 있습니다.
버튼의 색상, 모서리, 내부 간격 등은 원하는 스타일에 따라 설정할 수 있습니다.
마치며
이제 cupertino_icons를 사용하여 Flutter 앱에서 아이콘이 있는 버튼을 만들 수 있게 되었습니다. CupertinoButton 위젯을 사용하여 원하는 아이콘과 스타일을 포함한 버튼을 쉽게 생성할 수 있습니다. 자세한 내용은 flutter/cupertino_icons 레포지토리에서 확인할 수 있습니다.