플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 모바일, 웹 및 데스크톱 애플리케이션을 만들 수 있습니다. 이번 블로그 포스트에서는 플러터 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 뷰포트(Viewport) 크기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.
1. 플러터 커퍼티노 스테퍼란?
플러터 커퍼티노 스테퍼는 iOS 스타일을 따르는 스테퍼 위젯으로써, 숫자나 수량을 선택할 수 있는 UI 요소입니다. 스테퍼 위젯을 이용하여 뷰포트 크기를 조절하는 기능을 구현할 수 있습니다.
2. 뷰포트 크기 조절 기능 구현하기
뷰포트 크기 조절 기능을 구현하기 위해 다음과 같은 단계를 따를 수 있습니다.
2.1. 의존성 추가하기
뷰포트 크기 조절을 위해 커퍼티노 스테퍼를 사용하기 위해서는 cupertino_icons 패키지를 의존성으로 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.4
의존성을 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드 받습니다.
2.2. 뷰포트 크기를 제어할 변수 생성하기
뷰포트 크기 조절을 위해 값을 저장할 변수를 생성합니다. 예를 들어, viewportSize 변수를 생성하여 초기값을 설정합니다.
import 'package:flutter/material.dart';
double viewportSize = 100.0; // 초기값 설정
2.3. 뷰포트 크기 조절을 위한 UI 작성하기
뷰포트 크기를 조절하기 위한 UI를 작성합니다. 예를 들어, CupertinoStepper와 Text 위젯을 사용하여 값을 표시하고, 스테퍼를 통해 값을 조절할 수 있도록 합니다.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class ViewportSizeAdjustmentPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Viewport Size Adjustment'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Viewport Size: $viewportSize',
style: TextStyle(fontSize: 20.0),
),
SizedBox(height: 16.0),
CupertinoStepper(
initialValue: viewportSize,
onChanged: (value) {
viewportSize = value;
},
),
],
),
),
);
}
}
2.4. 글로벌 테마 설정하기 (선택사항)
CupertinoStepper 위젯은 iOS 스타일을 따르기 때문에, 플러터 앱 전체의 테마를 iOS 스타일로 설정하는 것이 일관성을 유지하기 위해 좋습니다. 아래의 코드를 main.dart 파일의 main() 함수 내에 추가하여 전체 앱의 테마를 iOS 스타일로 설정합니다.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Viewport Size Adjustment',
theme: ThemeData(
cupertinoOverrideTheme: CupertinoThemeData(
brightness: Brightness.light,
),
),
home: ViewportSizeAdjustmentPage(),
);
}
}
3. 실행결과
위에서 구현한 뷰포트 크기 조절 기능을 실행해보면, 스테퍼를 조절함에 따라 뷰포트 크기가 변경되는 것을 확인할 수 있습니다.
4. 마무리
위의 단계들을 따라가면 플러터 커퍼티노 스테퍼를 이용하여 뷰포트 크기 조절 기능을 구현할 수 있습니다. 이를 응용하여 원하는 기능을 추가하거나 스타일을 변경할 수도 있습니다. 좀 더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.