목차
소개
플러터(Flutter)는 Google에서 개발된 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위해 사용됩니다. 이번 튜토리얼에서는 플러터의 커퍼티노(Cupertino) 스테퍼를 사용하여 레벨 선택 기능을 구현하는 방법을 알아보겠습니다.
프로젝트 설정
먼저, Flutter 프로젝트를 생성한 뒤 해당 프로젝트를 열어줍니다. Flutter 프로젝트 생성 방법은 공식 문서를 참고하세요.
Cupertino 스테퍼 생성
Cupertino 스테퍼는 iOS 스타일로 보다 자연스럽고 아름다운 UI를 제공합니다. 해당 스테퍼를 생성하기 위해 다음 코드를 main.dart 파일에 추가해주세요.
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Level Selector',
home: Scaffold(
appBar: CupertinoNavigationBar(
middle: Text('Level Selector'),
),
body: Center(
child: CupertinoButton(
child: Text('Select Level'),
onPressed: () {
// 레벨 선택 화면으로 이동
},
),
),
),
);
}
}
위 코드는 플러터 앱의 최상위 부모 위젯인 MyApp을 정의하고, CupertinoApp을 사용하여 플러터 앱을 생성합니다. CupertinoNavigationBar는 앱 상단에 타이틀을 표시하기 위한 위젯이며, Center 위젯 내의 CupertinoButton은 레벨 선택 화면으로 이동하는 버튼입니다.
레벨 선택 기능 구현
이제 레벨 선택 기능을 구현해보겠습니다. 레벨 선택 화면으로 이동하는 버튼을 누르면, 사용자가 원하는 레벨을 선택할 수 있는 커퍼티노 스테퍼가 나타나도록 코드를 수정해주세요.
class MyApp extends StatelessWidget {
int currentLevel = 1;
@override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Level Selector',
home: Scaffold(
appBar: CupertinoNavigationBar(
middle: Text('Level Selector'),
),
body: Center(
child: CupertinoButton(
child: Text('Select Level'),
onPressed: () {
showCupertinoDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text('Select a Level'),
content: Text('Current Level: $currentLevel'),
actions: [
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('Confirm'),
onPressed: () {
// 레벨 선택 완료 후 동작할 코드 추가
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
),
),
);
}
}
위 코드에서 showCupertinoDialog 함수를 사용하여 커퍼티노 다이얼로그를 표시하고, 사용자가 레벨을 선택할 수 있도록 합니다. 다이얼로그에는 현재 레벨 정보와 “Cancel” 및 “Confirm” 버튼이 포함되어 있습니다.
결론
이제 플러터의 커퍼티노 스테퍼를 사용하여 레벨 선택 기능을 구현하는 방법을 알게 되었습니다. 위의 예시 코드를 참고하여 원하는 대로 기능을 추가하고 커스텀해보세요. 플러터의 다양한 UI 위젯을 활용하여 아름다운 앱을 만들어보세요!