[flutter] 플러터 커퍼티노 스테퍼를 이용한 텍스트 폰트 크기 조절 기능 구현하기
플러터에서는 Cupertino 디자인을 통해 iOS 스타일의 UI를 구현할 수 있습니다. 이번에는 텍스트의 폰트 크기를 조절할 수 있는 기능을 구현하고, 이를 Cupertino 스테퍼를 이용해 제어하는 방법에 대해 알아보겠습니다.
1. Cupertino 디자인 패키지 추가하기
프로젝트의 pubspec.yaml 파일에 다음과 같이 cupertino_icons 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
추가한 후 flutter packages get 명령어를 통해 패키지를 다운로드합니다.
2. 스테퍼 위젯 추가하기
아래 예제 코드는 스테퍼 위젯을 추가한 예제입니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FontSizeAdjustmentScreen extends StatefulWidget {
@override
_FontSizeAdjustmentScreenState createState() =>
_FontSizeAdjustmentScreenState();
}
class _FontSizeAdjustmentScreenState extends State<FontSizeAdjustmentScreen> {
double _fontSize = 16.0;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('폰트 크기 조절'),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'텍스트 폰트 크기',
style: TextStyle(fontSize: _fontSize),
),
SizedBox(height: 16.0),
CupertinoSlider(
value: _fontSize,
min: 10.0,
max: 30.0,
onChanged: (value) {
setState(() {
_fontSize = value;
});
},
),
],
),
),
);
}
}
_FontSizeAdjustmentScreenState 클래스에서 _fontSize 변수를 선언하여 폰트 크기를 저장하고 업데이트합니다. CupertinoSlider 위젯을 사용하여 스테퍼를 표시하고 사용자의 입력에 따라 _fontSize 변수를 업데이트합니다.
3. 위젯을 메인 앱에 추가하기
생성한 FontSizeAdjustmentScreen 위젯을 메인 앱에 추가하면 됩니다.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'Flutter Demo',
theme: CupertinoThemeData(
primaryColor: Colors.blue,
),
home: FontSizeAdjustmentScreen(),
);
}
}
CupertinoApp을 사용해 앱을 생성하고, home 속성에 FontSizeAdjustmentScreen 위젯을 할당합니다.
이제 앱을 실행하면 텍스트의 폰트 크기를 스테퍼로 조절할 수 있는 화면이 나타납니다.
결론
이번에는 플러터 커퍼티노 스테퍼를 이용해 텍스트의 폰트 크기를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 플러터의 다양한 위젯을 활용하여 깔끔하고 사용자 친화적인 iOS 스타일의 UI를 구현해보세요.