개요
이 튜토리얼에서는 플러터(Flutter)의 커퍼티노 스테퍼를 사용하여 간단한 행성 크기 조절 기능을 구현하는 방법을 알아보겠습니다. 플러터의 커퍼티노 스테퍼는 iOS 디자인 가이드를 따르며 iOS 디바이스의 네이티브 스타일을 구현하는 데 사용됩니다.
구현 방법
1. 의존성 추가
먼저, cupertino_icons 패키지가 프로젝트에 추가되어 있는지 확인해야 합니다. pubspec.yaml 파일에 다음 코드를 추가하거나 업데이트하여 의존성을 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
의존성을 추가한 후, 패키지를 가져오기 위해 터미널에서 다음 명령어를 실행합니다.
flutter pub get
2. 행성 위젯 생성
이제 행성을 표시하는 위젯을 만들어보겠습니다. 다음 코드를 사용하여 Planet 클래스를 작성합니다.
import 'package:flutter/material.dart';
class Planet extends StatelessWidget {
final String name;
final double size;
const Planet({required this.name, required this.size});
@override
Widget build(BuildContext context) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: Center(
child: Text(
name,
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
위 코드에서는 Planet 클래스를 정의하고, 행성의 이름과 크기를 속성으로 가지도록 설정했습니다. build 메서드에서는 주어진 이름과 크기에 따라 위젯을 생성하여 반환합니다. 행성은 원 모양의 컨테이너로 표시되고, 이름은 중앙에 흰색 텍스트로 표시됩니다.
3. 메인 위젯 생성
이제 메인 위젯에서 행성을 생성하고 커퍼티노 스테퍼를 추가하는 작업을 진행하겠습니다. 다음 코드를 사용하여 MyApp 클래스를 작성합니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double planetSize = 50;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Planet Size Changer'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Planet(name: 'Earth', size: planetSize),
SizedBox(height: 20),
CupertinoSlider(
value: planetSize,
min: 0,
max: 200,
onChanged: (value) {
setState(() {
planetSize = value;
});
},
),
],
),
),
),
);
}
}
위 코드에서는 앱의 진입점인 main 함수에서 MyApp 위젯을 실행합니다. MyApp 클래스는 StatefulWidget을 상속하여 상태를 관리하는데 사용됩니다. 초기에는 planetSize 변수를 50으로 초기화하고, 스테퍼의 값과 변경됨에 따라 planetSize를 업데이트하는 메서드를 정의합니다.
MyApp의 build 메서드에서는 앱의 레이아웃을 정의합니다. Column 위젯에서 행성과 스테퍼를 세로로 배열하여 화면에 표시합니다. 스테퍼는 CupertinoSlider 위젯을 사용하여 iOS 스타일의 슬라이더를 생성하고, onChanged 콜백을 사용하여 planetSize 값을 업데이트합니다.
4. 실행 확인
앱을 실행하여 행성의 크기를 조절할 수 있는지 확인해보세요. 스테퍼를 움직이면 행성의 크기가 실시간으로 변경될 것입니다.
결론
이번 튜토리얼에서는 플러터의 커퍼티노 스테퍼를 사용하여 행성 크기 조절 기능을 구현하는 방법을 알아보았습니다. 커퍼티노 스테퍼는 iOS 디자인 가이드를 따르기 때문에 iOS 앱을 개발하는 경우 특히 유용합니다. 다른 위젯과 함께 사용하여 다양한 기능을 구현할 수 있으니 참고해보세요.